Bootstrap Jumbotron

Bootstrap Jumbotron defined as it is a responsive component which main motive that focuses visitor’s attention or consequently, highlights those piece of information which is special information inside a jumbotron.

hence, We can say that a Bootstrap Jumbotron indicates a large highlight box for calling focus to some special information or content.

furthermore, inside a jumbotron, you can put almost any other bootstrap code (Bootstrap elements and Classes) for additionally increase its engagement value or nearly any valid HTML.
As a result note:  Always Use a <div> element with class .jumbotron used to create a jumbotron

therefore, Jumbotron used examples:

1. Article Introduction
2. Project Presentation
3. Image Showcase

Jumbotron Inside Container

Jumbotron Inside the container, first of all, Place the jumbotron inside the <div class="container"> therefore, if you want the jumbotron to NOT extend to the edge of the screen means that jumbotron will be inside the screen or framework.

The Jumbotron Outside Container

In Jumbotron Outside the container, first of all, Place the jumbotron outside the <div class="container"> therefore, if you want the jumbotron to extend to the edge of the screen means that jumbotron will be outside the screen or framework.

Basic Jumbotron examples

Output

Jumbotron with a background image

Output

Fluid Jumbotron

therefore, the fluid jumbotron defined as it size coved full width, and without rounded corners, add the class .jumbotron-fluid and add class .container or .container-fluid inside the .jumbotron-fluid.
finally, it’s a modified jumbotron which occupies (covered) the entire horizontal space of its parent.  so, lets us see the example

Output