Lightweight, elastic component for showcasing hero unit style content.
These component is used for a lightweight or flexibly because that can optionally extend the entire viewport to showcase key marketing messages on your site.To use the Jumbotron −
Design a container div with the class of .jumbotron
In addition to a larger the font-weight is reduced to 200px.
Showcasing Contents with Jumbotron
The Bootstrap provides a jumbotron component an excellent way to showcase the key content or information on a web page. Just wrap your features, content like-: heading, descriptions etc.In this div element and apply the class .jumbotron on it.
Learn to New Websites
In today’s world internet is the most famous way of connecting with the people. At Gurukul Zone.com you will learn the essential of web development technologies along with real life practice example, so that you can create your own website to connect with the people around the world.
Creating Full Page Width Jumbotron
You will design it without rounded corners and that covers the full width of the viewport, place it outside all the containers, add the .jumbotron-fluid modifier class on it, and adding a like-.container or .container-fluid within it, as shown in the following example:
This is a modification of jumbotron that occupies the entire horizontal space of its parent.
Bootstrap classes is used for color,background-color,text-alignment clasess and spacing ,border classes.
You can use the contextual color classes to emphasize the text and convey meaning through color. Here’s the overall list of available contextual color classes.
.text-infoNote! Dealings with specificity Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a with the class.
Background Color Classes
Similar to the contextual color classes, you can use the contextual background color classes to set the background-color of an element to apply extra emphasis on them.
Text Alignment Classes
You can use these text alignment classes to align and format your text content.
You can apply the border utility classes to quickly style the border and border-radius of an element. They are very useable for images, buttons, or any other element.
You can use the spacing utility classes to quickly adjust the margin and padding of an element. The # character in the classes .mt-#, .pt-#, etc. represent the size of the margin or padding. The size of the value can be an integer from 0 to 5, or auto.
.mb-0.mb-1.mb-2.mb-3.mb-4.mb-5.mb-autoTip: You can also apply negative margins using the margin utility classes. Just modulate the size number with the character n, like .mt-n1, .mb-n2, and so on.
You can use the shadow utility classes to quickly add or remove shadows to elements.
No shadowSmall shadowRegular shadowLarger shadow
You can use the sizing utility classes to easily make an element as wide or as tall.
Width 25%Width 50%Width 75%Width 100%Width auto
You can use the float utility classes to quickly float an element to the left or right or remove float from an element altogether. Here’s the list of available float classes.
Vertical Alignment Classes
You can utilize the alignment utility of vertical classes to quickly change the vertical alignment of inline, inline-block, inline-table, and table cell elements.
With table cells:
You can use the display utility classes to quickly and responsively toggle the display value of an element. You can also command an element’s display when printing the page.