Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

bootstrap
jumbotron
communitycreator

What is the Bootstrap 4 jumbotron?

Akande Olalekan Toheeb

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code

Overview

Bootstrap 4 comes with a big grey box that calls extra attention to some special content or information. This box is called the jumbotron.

This box can be used for many purposes, as it can contain nearly any valid HTML, including other Bootstrap elements/classes.

Any content that requires special attention, i.e., the navbar, is usually put inside the jumbotron.

How to use

Bootstrap 4’s jumbotron is very easy to use. To create a jumbotron, use a div element with the class jumbotron, and you can put nearly any valid content inside it.

Using the "jumbotron" class inside a "div" element

The jumbotron can be made to have a full width and be without rounded corners by simply using the jumbotron-fluid modifier class and adding a container or container-fluid within.

Using the "jumbotron-fluid" modifier

Bootstrap 4’s jumbotron makes it easy for us to wrap lots of important content in one container at a time.

You can practice using it for a better understanding of how it works.

RELATED TAGS

bootstrap
jumbotron
communitycreator

CONTRIBUTOR

Akande Olalekan Toheeb

Grokking Modern System Design Interview for Engineers & Managers

Ace your System Design Interview and take your career to the next level. Learn to handle the design of applications like Netflix, Quora, Facebook, Uber, and many more in a 45-min interview. Learn the RESHADED framework for architecting web-scale applications by determining requirements, constraints, and assumptions before diving into a step-by-step design process.

Answers Code
Keep Exploring