Jumbotron in Bootstrap, displaying content on the web


In the previous lesson, readers read with Taimienphi.vn to learn about Spinner in Bootstrap, in the next lesson below, Taimienphi.vn will introduce you more about Jumbotron in Bootstrap.


Refer to the following article of Taimienphi.vn to learn about Jumbotron in Bootstrap. Also readers can refer to some other Bootstrap lessons already on Taimienphi.vn to learn more about Badge in Bootstrap.

Learn about Jumbotron in Bootstrap

1. Display web content with Jumbotron

Jumbotron in Bootstrap is a great way to display key content or information on web pages. We only need to wrap the featured content, such as title, description, … in the element div and apply the class .jumbotron up there.

For example: The following example illustrates how to display web page content with Jumbotron in Bootstrap:

jumbotron in bootstrap 2

The output will look like the following:

jumbotron in bootstrap 3

2. Create a web page that covers the entire viewport

To create a Jumbotron without rounded corners, covering the entire viewport width, we just need to place the Jumbotron outside all the containing elements, add a modified layer .jumbotron-fluid on it, and add layers .container or class .container-fluid In particular, refer to the example below:

jumbotron in bootstrap 4

The output will look like the following:

jumbotron in bootstrap 5

The above lesson Taimienphi.vn has just introduced you to Jumbotron in Bootstrap. Also readers can refer to some other lessons already on Taimienphi.vn to learn more about creating a navigation bar in Bootstrap offline.

https://thuthuat.taimienphi.vn/jumbotron-in-bootstrap-51212n.aspx
In the next lesson, Taimienphi.vn will introduce you more about classes Helper in Bootstrap.

.

Add a Comment

Your email address will not be published. Required fields are marked *