Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
Now that all the necessary page elements are in place, let's add a few finishing touches using Bootstrap's utility classes.
-
0:00
Now that we have all the necessary landing page elements in place,
-
0:03
let's add a few finishing touches.
-
0:05
For instance, the page looks a little boring with the dark text
-
0:08
against the plain white background.
-
0:10
So let's make the page more exciting by adding color.
-
0:13
Again, the handy utilities include classes or colors.
-
0:18
You can quickly set the background of an element to any
-
0:21
of these colors using one of the contextual classes.
-
0:24
And I think the bg-info background color will look good in my page.
-
0:29
So back in index.html,
-
0:33
I'll give my body tag the class bg-info.
-
0:41
This looks better, but now we should change the heading and paragraph text
-
0:45
color to white to give the content a nicer contrast against the blue background.
-
0:51
So back in the code snippets, you'll see that some examples use the class
-
0:55
text-white to make the text white.
-
0:58
So I'll add this class to my body tag.
-
1:05
The Sign up button is also looking a little too plain so
-
1:08
let's change the color.
-
1:11
To do that, I'll click over to Components and Buttons, and
-
1:15
I'll use on of the six predefined button styles shown here.
-
1:20
I think this primary dark blue color will look sharp against
-
1:24
a light blue background.
-
1:27
So I'll go ahead and copy the class btn-primary, and
-
1:31
back in index.html, I'll replace btn-secondary with btn-primary.
-
1:39
Give that a Save and what a difference adding a little color could make.
-
1:42
Finally, the content on the page would look better and
-
1:46
feel less cramp if we added white space between the top edge of the page and
-
1:51
the headline and between the lead text and sign up form.
-
1:55
Currently the spacing is looking a little too tight, so, back in the docs.
-
1:59
If I click over to the Utilities section,
-
2:02
the spacing page shows a wide range of shorthand responsive margin and
-
2:08
padding utility classes that let you modify an element's appearance, perfect.
-
2:15
So these class names use a certain format that sets the vertical and
-
2:19
horizontal padding or margin of an element.
-
2:22
Each class specifies the property, side and size, so if you see an m
-
2:28
in the class name that means it’s setting a margin, and p sets the padding.
-
2:34
And the sides are defined using letters like t, b, l, and r,
-
2:38
which sets the top, bottom, left and right sides, respectively.
-
2:42
So, for example, mt-0 means margin top 0,
-
2:46
meaning it removes the top margin of an element.
-
2:50
You see, Bootstrap uses the CSS rem unit to set margins and padding.
-
2:57
Rem which stands for root is a flexible CSS unit
-
3:01
that's always relative to the font size of the root element of the page.
-
3:05
So the numbers in these class names are multiples
-
3:09
on Bootstrap's at global default value of 1 rem.
-
3:13
For example, 1 sets the margin or padding to 0.25 rem,
-
3:18
2 will set it to 0.5 rem, then 4 to 1.5 rem, and 5 to 3 rem.
-
3:25
So for instance, .ml-1 means margin-left 1,
-
3:30
which sets the margin value to 0.25 rem.
-
3:34
So for example, to create more space between the headline and
-
3:38
the top of the page, I can give the H1 a top margin using the class,
-
3:46
mt for margin top, followed by dash and the amounts.
-
3:51
So let's set it to 3 rem using the number 5.
-
3:56
And I'll do the same for paragraph,
-
3:59
this time I'll apply a bottom margin of 3 rem using the class mb-5.
-
4:09
The space around the content looks great.
-
4:11
Now, it's less cluttered which improves the readability of the content.
-
4:16
All right, so our landing page for Full Stack Conf is now complete, and
-
4:19
it looks like we nailed all the design requirements given to
-
4:22
us by the conference organizers in what?
-
4:25
Ten minutes or so, that's impressive.
-
4:28
Now, you'd still need to program the sign-up form yourself to collect your
-
4:32
users email addresses.
-
4:33
Bootstrap doesn't have that feature since it's a front-end framework.
-
4:37
But after this course, you could check out other Treehouse courses that will teach
-
4:41
you how to program a form, using a programming language like Java Script,
-
4:45
PHP, Ruby, Java, or Python.
-
4:48
You've seen how you can quickly build the functional layout and
-
4:51
design in just a few minutes using Bootstrap.
-
4:54
Now, we're ready to start building the website for Full Stack Conf.
-
4:57
In the next section, I'll walk you through the project we're going to build,
-
5:01
then you'll learn how to use Bootstrap's mobile-first grid system to lay out your
-
5:05
content and UI components.
You need to sign up for Treehouse in order to download course files.
Sign up