FREELessons: 12Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Huge Headers With Jumbotrons

In this lesson we’ll create some stunningly large sections with prominent text to help describe to the visitor what type of content will be on each page.

Related Links

3.3 Huge Headers With Jumbotrons

Welcome back to Power Up Your Portfolio with Bootstrap. I'm your instructor, Cory Simmons. In our last lesson, we did a general reset to our page, added some fonts, and overrode our first Bootstrap component. In this lesson we'll learn how to use Bootstrap's Jumbotron component to create some, some huge attention-drawing headers to our website. We'll start with the markup, which is located under Bootstrap's documentation at, under components, then Jumbotron. We want our Jumbotron to be centered, so we'll put it inside of a fluid container and add text-center to it. Then just like any other grid element, we'll add a row to it and inside of that row we'll put a column that spans ten out of twelve columns, and offset it by one column to center it. This will give us a column padding on each side of our text which will look nice. Inside of that, we'll add an h1 with the text, hello, my name is X. And underneath that h1, we'll put a paragraph with the Bootstrap class of lead on it to signify it's a leading paragraph, a paragraph that's a bit bigger and more pronounced than other paragraphs. Inside of that paragraph we'll add a little tag line. In my case I'll put, I sell websites and website accessories, although your tag line might want to be a bit more serious. Now lets not forget to put our Jumbotron markup div in there right underneath container-fluid. [BLANK_AUDIO] Now if we refresh and look at it, you'll see it's created a light gray background with some padding on each side of it. This padding is usually helpful as it pushes the text off the edges of the container. But we'll be getting rid of the background in a second. And we'd like our text to line up with the other grid elements in case we were to remove the texts in our class. Plus this gives us a good chance to practice overwriting Bootstrap defaults. So let's inspect that jumbotron and we'll see the thing with padding on it is container-fluid.jumbotron. So copy that over to our CSS and say padding-left 0 and padding-right 0. Now let's inspect and find out what selector has the background color on it which happens to be simply Jumbotron. So let's copy that selector over and remove the background color. And while we're here, let's add some margins to the top and bottom of our Jumbotron of 75 pixels just to push it off the nav bar and any content below it. Refresh, and already our Jumbotron is taking shape and looking good. Well we want this text to be huge right? So let's say Jumbotron h1, font-size 120 pixels. And jumbotron.lead, font-size 32 pixels. Refresh, and wow, now we're drawing attention. What's left? Well, after you add any new piece to your website, be sure to contract your viewport and see what it looks like on smaller devices. Obviously our huge text looks good on desktops. But as sides get, but as the sides get smaller and smaller, it begins to look clunky and just horrible on really small devices. So let's add some media queries in there to make it look good. Our first one, we'll just change the h1 size, since the lead paragraph still looks good. So we'll say @media, max-width, 992 pixels, jumbotron h1, font-size, 72 pixels. But for our next one, let's change both the, both sizes, so they will look good. So we'll say @media, max-width 768 pixels, jumbotron h1, font-size, 40 pixels, jumbotron.lead, font-size, 20 pixels. Refresh, resize and enjoy. [BLANK_AUDIO] When we first contracted our view port, I noticed that our background wasn't actually staying in the bottom right of the page. And what we need to do to fix that is change our HTML selectors, CSS rule, background position to background-attachment. In this lesson we learn how to include another Bootstrap component, the Jumbotron, and how to overwrite its default styles to fit our theme. In our next lesson, we'll begin work on a filterable portfolio by setting it up with Bootstrap's grid and introducing a new Bootstrap component, ill navigation.

Back to the top