Now that we have all the necessary landing page elements in place,

let's add a few finishing touches.

For instance, the page looks a little boring with the dark text

against the plain white background.

So let's make the page more exciting by adding color.

Again, the handy utilities include classes or colors.

You can quickly set the background of an element to any

of these colors using one of the contextual classes.

And I think the bg-info background color will look good in my page.

So back in index.html,

I'll give my body tag the class bg-info.

This looks better, but now we should change the heading and paragraph text

color to white to give the content a nicer contrast against the blue background.

So back in the code snippets, you'll see that some examples use the class

text-white to make the text white.

So I'll add this class to my body tag.

The Sign up button is also looking a little too plain so

let's change the color.

To do that, I'll click over to Components and Buttons, and

I'll use on of the six predefined button styles shown here.

I think this primary dark blue color will look sharp against

a light blue background.

So I'll go ahead and copy the class btn-primary, and

back in index.html, I'll replace btn-secondary with btn-primary.

Give that a Save and what a difference adding a little color could make.

Finally, the content on the page would look better and

feel less cramp if we added white space between the top edge of the page and

the headline and between the lead text and sign up form.

Currently the spacing is looking a little too tight, so, back in the docs.

If I click over to the Utilities section,

the spacing page shows a wide range of shorthand responsive margin and

padding utility classes that let you modify an element's appearance, perfect.

So these class names use a certain format that sets the vertical and

horizontal padding or margin of an element.

Each class specifies the property, side and size, so if you see an m

in the class name that means it’s setting a margin, and p sets the padding.

And the sides are defined using letters like t, b, l, and r,

which sets the top, bottom, left and right sides, respectively.

So, for example, mt-0 means margin top 0,

meaning it removes the top margin of an element.

You see, Bootstrap uses the CSS rem unit to set margins and padding.

Rem which stands for root is a flexible CSS unit

that's always relative to the font size of the root element of the page.

So the numbers in these class names are multiples

on Bootstrap's at global default value of 1 rem.

For example, 1 sets the margin or padding to 0.25 rem,

2 will set it to 0.5 rem, then 4 to 1.5 rem, and 5 to 3 rem.

So for instance, .ml-1 means margin-left 1,

which sets the margin value to 0.25 rem.

So for example, to create more space between the headline and

the top of the page, I can give the H1 a top margin using the class,

mt for margin top, followed by dash and the amounts.

So let's set it to 3 rem using the number 5.

And I'll do the same for paragraph,

this time I'll apply a bottom margin of 3 rem using the class mb-5.

The space around the content looks great.

Now, it's less cluttered which improves the readability of the content.

All right, so our landing page for Full Stack Conf is now complete, and

it looks like we nailed all the design requirements given to

us by the conference organizers in what?

Ten minutes or so, that's impressive.

Now, you'd still need to program the sign-up form yourself to collect your

users email addresses.

Bootstrap doesn't have that feature since it's a front-end framework.

But after this course, you could check out other Treehouse courses that will teach

you how to program a form, using a programming language like Java Script,

PHP, Ruby, Java, or Python.

You've seen how you can quickly build the functional layout and

design in just a few minutes using Bootstrap.

Now, we're ready to start building the website for Full Stack Conf.

In the next section, I'll walk you through the project we're going to build,

then you'll learn how to use Bootstrap's mobile-first grid system to lay out your

content and UI components.