"Object-Oriented Swift" was retired on May 31, 2020. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Bootstrap Basics!
You have completed Bootstrap Basics!
Preview
Now that all the necessary page elements are in place, let's add a few finishing touches using Bootstrap's utility classes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up