Jumbotron

Jumbotron Class

We can enclose a content that we want to attract more visitors' attention, usually title and subheadings, into a div with the jumbotron class applied.

A jumbotron has also been used at the top of the page you are currently on, and the title is shown in a remarkable size.

The Jumbotron class has a light gray background and rounded corners by default. It also enlarges the text in it to fit the screen.

We can make changes to these properties with our own css codes.

Example of using the Jumbotron:

<div class="jumbotron">
  <h1>Main Title</h1> 
  <p>Descriptive text. Other tags (hgroup, h2, h3, etc.) can also be used here. </p> 
</div>

A div element with a jumbotron applied will occupy the entire width of its location . If it is not enclosed in another label, it will have the width to fill the entire screen.

In the topic examples section, there is an example of a page with a jumbotron. Experiment by changing the codes.

bootstrap what is jumbotron, how to use jumbotron, how to use jumbotron, jumbotron, what is it used for, jumbotron formatting

EXERCISES

Jumbotron Tutorial Try It

Since the jumbotron in the example is outside the container, it will take up the entire screen.

Click the try it yourself button to see the codes, examine them and see the result by making changes.



COMMENTS




Read 572 times.

Online Users: 482



bootstrap-jumbotron