Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Bootstrap Basics

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Using Jumbotron to Showcase Key Content

2:48 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.

Resources

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    In this video, we'll begin building the large page header 0:00
    containing the Full Stack Conf headline, lead text, and call to action buttons. 0:03
    This is an important section of the page, so we'll need to draw attention to it. 0:08
    Bootstrap has just the component for that, Jumbotron. 0:12
    The Jumbotron component is ideal for showcasing key content and 0:15
    calls to action. 0:19
    It gives important content the emphasis it requires. 0:20
    So, back in Index.html, right below the navbar and 0:23
    outside of the main container, I'll add comments for the Jumbotron component. 0:27
    I'm going to use the Fluid jumbotron shown here so 0:41
    that it extends the full viewport width without the rounded corners on each side. 0:44
    So I'll copy the fluid jumbotron snippet and 0:49
    paste it between my jumbotron comment tags. 0:52
    In my jumbotron, I want a larger heading, so 1:04
    I will change the h1 class to display-2. 1:07
    Then, between the h1 tags, I'll add the conference name, Full Stack Conf. 1:10
    Then I'll add a short description as the lead text. 1:19
    So I'll replace the paragraph text with 1:22
    A One-day Conference About All Things JavaScript. 1:27
    The jumbotron displays dark text against a light grey background by default, but 1:38
    you can change the colors using Bootstrap's color scheme classes. 1:42
    So let's use the same white text and 1:47
    light blue background combination we used earlier in the coming soon page. 1:49
    So I'll give jumbotron the class bg-info. 1:53
    And I want to display white text against the blue background, so 2:02
    I'll add the class text-white. 2:07
    Finally, I'll center align the content inside the jumbotron starting 2:13
    in the small break point range by giving its container a class text-sm-center. 2:20
    And I'll increase the top padding of the jumbotron container by three rem 2:28
    using the utility class PT, or padding top 5. 2:33
    That was pretty quick and easy, right? 2:40
    So up next, we'll add call out buttons to the page using the button and 2:42
    button group components. 2:46

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up