4 minutes
Share the link to this page
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site


Hello in this bootstrap four video, we're going to look at the jumbotron within bootstrap. jumbotron is sound like something I've told transformers, but I assure you it is not basically a lightweight and flexible component that you can add to your website, which allows you to highlight and showcase some sort of text or some sort of message on your website. You don't just have to have technical necessity have whatever item you want in there, we're just gonna keep it simple. Add a text, add some text and add a button inside it. There's not much to it in terms of coding. So all you got to do is add a div.

The div has a class of jumbotron whenever I hear jumbotron with bootstrap, I always do think of something like Transformers sound like one of the robots in there and inside that you would have an h1 and getting knocked out of h1. You can chain this up as much as you want beyond the jump Voltron class here, you can modify as much as you want. This is just essentially what is highlighted and showcased on the bootstrap four website. And I'm going to show you that but we recommend that you take items out put items in that you've learned in bootstrap and outside of the bootstrap for general HTML and CSS. Let's see how it looks. So for this, the class is this play dash free.

For this, we're gonna put, this is a awesome title. I'm gonna put p tag a class of need. And in Sorry, I'm just gonna put a random paragraph. Obviously, this would usually be what I'm trying to highlight. I've got two random paragraphs generated from a website found by Google. I'm just gonna put one here.

And now it's gonna pop up haitch also horizontal. And so it is going to have a class of M dash boy dash MD. So the student beats RA, you're gonna have another p tag and in here it's going to have another random paragraph. But again, like I said, I just want to iterate. You can format this however you want. Mix the order of these elements and tags, add new elements, tags, images, buttons, whatever you want.

And then finally, what's gonna add a key tag is going to have a class of lead. And inside here, we are simply going to add a button and have a class of btn all of this stuff to the we button we've covered in separate videos. Check them out, they are in this series as well. btn dash, LG Why not? h ref have htt P. So now system that coding QA, you can put whatever you want, obviously, put the roll button. And inside here, we'll just put whatever you want for the text of the buttons I want to put visit us.

Save that now for just go to our web browser refresh. We have our jumbotron class, essentially what that jumbotron class was a bit of styling with a bit of border radius and some background color. So if we just resize this, it fits to the width of the parent container and the parent container offset to fill or to take up 12 columns on every single screen size. So that's the jumbotron. There's not much more to it than that. Like I said, we recommend that you change these up mix them up and new items different item buttons in dropdowns whatever you want, maybe even an embedded video that'd be cool to highlight, embed embedded videos all the time on website.

Maybe you've got a new trailer for a new product that you're launching. If you have any questions, feel free to post them on sonar learning Dakota UK for slash question dot php. That's the link to our education platform. There'll be a link in the description so you don't need to remember it. There'll be another link in the description to the source code from this video. Please rate, comment, subscribe, and really help keep the content free.

And as usual, thanks for watching. I hope you have a great day.

Sign Up


Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.