In the fifth installment of our Bootstrap 3 tutorial, we show you how to build a jumbotron.
Video Transcript
Hey everybody this is Christopher Gimmer from BootstrapBay.com and welcome to the fifth installment of our Bootstrap 3 tutorial. Today we’re going to build a jumbotron.
In between our navbar and our footer, we’re going to add a container. Inside this container we’re going to add a jumbotron class. If we go to our preview you’ll see that there’s a grey box now and we can add any HTML markup inside this jumbotron.
We’ll add an h1 tag and call this Bootstrap themes then we’ll add a paragraph tag and we’ll put our slogan: BootstrapBay is your #1 source for premium Bootstrap themes & templates.
If we go to our preview you’ll see the text inside the jumbotron. So basically what the jumbotron does is highlight some important elements on your website.
One thing we can add here is some buttons. So we’ll go:
<a href="#" class="btn btn-primary">Buy Themes</a> <a href="#" class="btn btn-success">Sell Themes</a>
If you go to your preview you’ll see that we have the blue and green buttons. One thing I’m going to add is the text-center class so everything is centered. The jumbotron is a great way to make some stuff stand out and highlight some key things.
The only thing right now is that the jumbotron is right up against our navbar so we’re going to want to add some custom padding. Inside our custom.css file we’re going to set our padding-top to 70 pixels. Now when we go back into our preview you’ll notice there’s a bit of space between the jumbotron and the header.
So that’s it for our tutorial on building a jumbotron. In our next video we’re going to dive into the grid system and start adding some columns to our website. Make sure to subscribe and we’ll see you in the next video.
