This course will be retired on December 31, 2017. We recommend "Bootstrap 4 Basics" for up-to-date content.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Enhancing the Page4:27 with Guil Hernandez
Now that all the necessary page elements are in place, let's add a few finishing touches using Bootstrap's utility classes.
Bootstrap 4 alpha has changed since this video was shot. Here are the needed changes for your code:
bg-info class no longer makes the text white, as shown in the video. Now, you need to manually define the color by adding a second class. So the opening body tag for for this video should now be:
<body class="bg-info text-white">
Three big changes for the spacing section of the video, where margins are added to the top of the headline and bottom of the paragraph:
- Bootstrap no longer uses class names like this
m-t-3to define the location, size and type of spacing (padding or margin). They've decided to remove the first hyphen character, so the correct class name would be
- The spacing values discussed in the video no longer reflect full REM values. In other words,
mt-3does not add 3 rem to the top margin. It actually is just 1 rem. To get the spacing above the headline as seen in the video the top margin should be
- Adding a margin to the bottom of the headline no longer works -- due to a "collapsing margin" (Mastering Collapsing Margins) adding margin space to the bottom of the paragraph doesn't add any space. Instead use a class to add bottom padding to the paragraph:
The correct code for the headline and paragraph should be:
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 for contextual colors and backgrounds.
With the background classes you can
easily set the background of an element to any of these colors.
I think this light blue background color will look good in my page.
So, i'll copy the class snippet bg-info, and
paste it in my page's opening body tag.
This looks a lot better.
What's great is that Bootstrap automatically changes all the text
to white, which gives the text a nicer contrast against the blue background.
The Sign up button is also looking too plain, so let's change the color.
To do that I can simply click over to the buttons page and
use one of the six predefined button styles shown here.
I think this primary dark blue color
will look sharp against the light blue background.
So back in my HTML file, I'll find my button element and
replace the class button secondary with button primary.
What a difference adding a little color can make.
Finally, the content on the page would look better and
feel less cramped if we added white space between the top edge of the page and
the headline, and between the lead text and the sign up form.
Currently, the spacing is looking a little too tight.
Back in the docs, if I click over to the Utilities page,
the very first section shows me how to add spacing around my content.
It says that I can assign margin or
padding to an element with these shorthand classes here.
These spacing class names use a certain format.
That sets the vertical and horizontal padding and margin of an element.
Each class specifies the property sides and size.
So for example, m-t-0 means margin top zero.
So, it removes the top margin of an element and m-l-1, means margin left one.
Bootstrap uses the CSS rem unit for its typography, margins and padding.
Now rem, which stands for 'root em', 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 classes
are multiples on Bootstrap's global default value of one rem.
So for example,
this class applies a margin of one rem to the left side of a component.
Now, the class m-l-2 would apply two rems and so on.
So to create more space between the headline and the top of the page,
I can give the h1 a top margin using the class m-t for
margin-top followed by the amount.
Let's set it to 3 rem.
And I'll do the same for the lead paragraph.
This time I'll apply a bottom margin of 3 rem using the class m-b-3,
or margin-bottom 3.
All right, so let's save our page and take a look at it in the browser.
And the space around the content looks great.
Now, it looks less cluttered which improves the readability of the content.
So our landing page for a 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, 15 minutes or so.
That's pretty impressive.
Now, you'd still need to program the sign up form yourself
to collect your user's 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
Ruby, Java, or Python.
You've seen how you can quickly build a functional layout and
design and 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 layout your content and UI components.
You need to sign up for Treehouse in order to download course files.Sign up