Jumbotron and Helper Classes of Bootstrap

 Bootstrap Jumbotron

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.

Code-:

Output-:

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.

Start learning today

 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:

Code-:

Output-:

Fluid jumbotron

This is a modification of jumbotron that occupies the entire horizontal space of its parent.

 Bootstrap Helper Classes

Bootstrap classes is used for color,background-color,text-alignment clasess and spacing ,border classes.

 Color 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.

Example-:

.text-primary

.text-secondary

.text-success

.text-danger

.text-warning

.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.

Example-:

.bg-primary.bg-secondary.bg-success.bg-danger.bg-warning.bg-info.bg-light.bg-dark

 Text Alignment Classes

You can use these text alignment classes to align and format your text content.

 Border Classes

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.

Example-:

 Spacing Classes

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.

Example-:

.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.

 Shadow Classes

You can use the shadow utility classes to quickly add or remove shadows to elements.

Example-:

No shadowSmall shadowRegular shadowLarger shadow

 Sizing Classes

You can use the sizing utility classes to easily make an element as wide or as tall.

Example-:

Width 25%Width 50%Width 75%Width 100%Width auto

 Float Classes

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.

Example-:

.float-left.float-right.float-left.float-right.float-none

 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.

Example-:

With table cells:

baselinetopmiddlebottomtext-toptext-bottom

 Display Classes

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.

You can also utilize the responsive breakpoints (sm, md, lg, and xl.) with these show utility classes to show or hide elements depending on viewport width using the format .d-{breakpoint}-{value}, for example, .d-sm-none, .d-md-block, .d-xl-block, and so on.

Leave a Reply

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