Jumbotron can be used in bootstrap by using the class .jumbotron within the container <div> tag. If we are using <h1> heading along with jumbotron, the weight of the font will be reduced to 200px.

Consider the following example in which we have used jumbotron:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css/ bootstrap. min. css ” rel = “stylesheet” >

< script src = “/ scripts / jquery. min. js ” >< /script >

< script src = ” / bootstrap / js / bootstrap. min. js ” ></ script >

< /head >

< body >

< div class = “container” >

< div class = “jumbotron” >

< h1 > WELCOME </ h1 >

< p > Jumbotron Example < /p >

< p >

< a class = “btn btn- primary btn- lg” role = “button” > For More </ a >

< /p >

</ div >

</ div >

</ body >

< /html >

The above code will generate the following result:

OUTPUT:

It can be seen in the above example that the heading is merged. If the jumbotron was not used with the heading then the heading will look like the following:

We can also have jumbotron without rounded corners and to adjusted to full screen by simply using the .jumbotron class outside the <div class = “container”>.

Consider the following example in which we have done this:

CODE:

<! DOCTYPE html >

< html >

< head >

< title > Bootstrap Example </ title >

< link href = ” / bootstrap / css / bootstrap. min. css” rel = “stylesheet” >

< script src = ” /scripts / jquery. min. js ” >< / script >

< script src = “/ bootstrap / js/ bootstrap. min. js ” >< /script >

</ head >

< body >

< div class = “jumbotron” >

< div class = “container” >

< h1 > WELCOME < /h1 >

< p > Jumbotron Example < /p >

< p >

< a class = “btn btn- primary btn- lg” role = “button” > For More < /a >

< /p >

< /div >

</ div >

< /body >

</ html >

The above example will generate the following result:

OUTPUT: