In Bootstrap, a Jumbotron is a gray box containing text, designed to draw attention to the text within it. When you feel that a piece of text/information is particularly important and needs to be prominently displayed, you can simply write it in the Jumbotron.
What is Jumbotron? How to use Jumbotron Bootstrap 5? Let's find out together at Download.vn!
What is a jumbotron?
Jumbotron, sometimes also called jumbovision, is a video screen that uses large-screen television (video wall) technology. This technology was initially developed in the early 1980s by Mitsubishi Electric and Sony, which branded JumboTron in 1985. Jumbotrons are commonly used in stadiums and concert venues to display close-up images of events, as well as in outdoor public spaces (e.g., squares and pedestrian areas).
In Bootstrap , a Jumbotron is a gray box containing text, intended to draw more attention to the text within it. When you feel that a piece of text/information is particularly important and needs to be prominently displayed, you simply write it in the Jumbotron.
Jumbotron on Bootstrap 5
The Jumbotron was introduced in Bootstrap 3 as a large, padded box that highlights specific content or information. Although Jumbotrons are no longer supported in Bootstrap 5, a similar effect can still be achieved using the `` element, special helper classes, and color classes.
The jumbotron is an essential function in web development. It helps website owners understand the content being conveyed to users. It summarizes the page and encapsulates the main content in a small space. Bootstrap 5 uses margin, padding, contextual, and other design classes to create a basic jumbotron.
General formula for Jumbotron in Bootstrap
The following formula creates a basic jumbotron on a webpage. You can use other classes to create jumbotrons as you wish:
information and data. - The class
"m-3" (margin)is used to set the margin of the tag. You can use the top, bottom, left, or right elements. - Class p-5 is used to set the padding of the tag
. - The background class needs to set up a jumbotron background. You can choose an image as the background in the tag
.
A specific example can be found on the website TipsMake.com.com.
Examples of Jumbotrons
This is an introductory text about Jumbotron from the QuanTriMang.com website.
You will see results similar to the following:
How to use Jumbotron on Bootstrap 4
Inside Jumbotron, you can place almost any HTML element, even Bootstrap elements and classes.
Use the `.jumbotron` class to create a Jumbotron, as shown in the example below:
Ví dụ Bootstrap - TipsMake.com.com Jumbotron
This is the information that needs to be highlighted - TipsMake.com.com.
This is normal information.
This is just another normal piece of text.
Then you will get the following result:
Jumbotron with full width
If you want to create a full-width, unrounded Jumbotron, add the `.jumbotron-fluid` class and `.container` or `.container-fluid` inside it, like this:
Ví dụ Bootstrap - TipsMake.com.com Jumbotron
This is the information that needs to be highlighted - TipsMake.com.com.
This is normal information.
This is just another normal piece of text.
And the result will appear as follows:
That's it. The name might sound strange, but using a Jumbotron is actually quite simple, right?