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.
Using Jumbotron to Showcase Key Content2:43 with Guil Hernandez
Bootstrap's Jumbotron component is ideal for key marketing messages and calls to action; it gives important content the emphasis it requires.
Bootstrap 4 alpha has changed since this video was shot. We'll reshoot this course when a table beta version is released, but in the meantime here are the changes you need to know about for this video:
Jumbotron text color
bg-info class no longer changes the color of text. To make the text in the Jumbotron white add the
text-white class like this:
<div class="jumbotron jumbotron-fluid bg-info text-white">
Jumbotron container padding
The way padding and margin classes has changed. See the Teacher's Notes in the Styling Content video for more info. For the container inside the Jumbotron add the
pt-5 class so that the Jumbotron code should look like this
In this video, we'll begin building the large page header
containing the Full Stack Conf headline, lead text, and call to action buttons.
This is an important section of the page, so we'll need to draw attention to it.
Bootstrap has just the component for that, Jumbotron.
The jumbotron component is ideal for key marketing messages and
calls to action like sign up today or learn about our latest project.
The jumbotron component gives important content the emphasis it requires.
Back in my HTML file, right below the navbar,
I'll add a set of comments for the jumbotron component.
I'm going to use the Fluid jumbotron so that it extends the full viewport width,
without the rounded corners on each side.
So I'll click, Copy then I'll paste the snippet inside my jumbotron comments.
Now in my jumbotron I want a larger headline.
So I’ll change the h1 class to display 2.
Then add the conference name which is Full Stack Conf,
and I'll write a short description as the lead text.
So I'll replace this text here with a one day
The jumbotron displays dark text against a light gray background by default.
But you can change the colors using bootstrap's color scheme classes.
So let's use the same white text and
light blue background combination we used earlier in the coming soon page.
So I'll do that by giving the jumbotron the class bg-info.
Finally to center align the content inside the jumbotron
I'll give its container the class text-sm-center.
And I'll increase the top padding of the container by three ram
using the utility class p-t-3 or padding top three ram.
So that was pretty quick and easy right?
Up next, we'll add call out buttons to the page using the button and
button group components.
You need to sign up for Treehouse in order to download course files.Sign up