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