BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
Advertisements

Bootstrap Helper Classes

In this tutorial you will learn about the Bootstrap helper/utility classes.

Color Classes

You can use the contextual color classes to emphasize the text and convey meaning through color. Here's the complete list of available contextual color classes.

Class Description Test
.text-primary Apply blue color (#007bff) on text. Example
.text-secondary Apply grey color (#6c757d) on text. Example
.text-success Apply green color (#28a745) on text. Example
.text-danger Apply red color (#dc3545) on text. Example
.text-warning Apply yellow color (#ffc107) on text. Example
.text-info Apply teal color (#17a2b8) on text. Example
.text-light Apply very light grey color (#f8f9fa) on text. Example
.text-dark Apply dark grey color (#343a40) on text. Example
.text-body Apply Bootstrap's default body text color (#212529) on text. Example
.text-muted Apply light grey color (#6c757d) on text. Example
.text-white Apply white color (#fff) on text. Example
.text-black-50 Apply 50% transparent black color (rgba(0,0,0,.5)) on text. Example
.text-white-50 Apply 50% transparent white color (rgba(255,255,255,.5)) on text. Example

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.

Class Description Test
.bg-primary Apply blue background-color (#007bff) on an element. Example
.bg-secondary Apply grey background-color (#6c757d) on an element. Example
.bg-success Apply green background-color (#28a745) on an element. Example
.bg-danger Apply red background-color (#dc3545) on an element. Example
.bg-warning Apply yellow background-color (#ffc107) on an element. Example
.bg-info Apply teal background-color (#17a2b8) on an element. Example
.bg-light Apply very light grey background-color (#f8f9fa) on an element. Example
.bg-dark Apply dark grey background-color (#343a40) on an element. Example
.bg-white Apply white background-color (#fff) on an element. Example
.bg-transparent Apply transparent background-color (transparent) on an element. Example

Text Alignment Classes

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

Class Description Test
.text-left Align the text to the left. Example
.text-center Align the text to the center. Example
.text-right Align the text to the right. Example
.text-justify Justify the text content. Example
.text-wrap Wrap the overflowing text. Example
.text-nowrap Prevent text from wrapping. Example
.text-truncate Truncate the text with an ellipsis. Example
.text-break Break the long words to prevent overflow. Example
.text-lowercase Transform the text to lowercase. Example
.text-uppercase Transform the text to uppercase. Example
.text-capitalize Capitalize the first letter of each word. Example
.font-weight-bold Set the font-weight of an element to bold. Example
.font-weight-bolder Set the font-weight of an element to bolder (relative to the parent). Example
.font-weight-normal Set the font-weight of an element to normal. Example
.font-weight-light Set the light font-weight for an element. Example
.font-weight-lighter Set the lighter font-weight for an element (relative to the parent). Example
.font-italic Set the font-style of an element to italic. Example
.text-monospace Set the font-family of an element to monospace font (fixed-width) Example
.text-reset Reset the color of a text or link (inherits the color from its parent). Example
.text-decoration-none Remove the text decoration such as underline from a text. Example

Border Classes

You can use the border utility classes to quickly style the border and border-radius of an element. They are very useful for images, buttons, or any other element.

Class Description Test
.border Add a border on all sides of an element. Example
.border-top Add a border on the top side of an element. Example
.border-right Add a border on the right side of an element. Example
.border-bottom Add a border on the bottom side of an element. Example
.border-left Add a border on the left side of an element. Example
.border-0 Remove the border from all sides of an element. Example
.border-top-0 Remove the border from top side of an element. Example
.border-right-0 Remove the border from right side of an element. Example
.border-bottom-0 Remove the border from bottom side of an element. Example
.border-left-0 Remove the border from left side of an element. Example
.border-primary Change the border-color of an element to blue (#007bff). Example
.border-secondary Change the border-color of an element to grey (#6c757d). Example
.border-success Change the border-color of an element to green (#28a745). Example
.border-danger Change the border-color of an element to red (#dc3545). Example
.border-warning Change the border-color of an element to yellow (#ffc107). Example
.border-info Change the border-color of an element to teal (#17a2b8). Example
.border-light Change the border-color of an element to very light grey (#f8f9fa). Example
.border-dark Change the border-color of an element to dark grey (#343a40). Example
.border-white Change the border-color of an element to white (#fff). Example
.rounded Round all corners of an element. Example
.rounded-top Round top-left and top-right corners of an element. Example
.rounded-right Round top-right and bottom-right corners of an element. Example
.rounded-bottom Round bottom-left and bottom-right corners of an element. Example
.rounded-left Round top-left and bottom-left corners of an element. Example
.rounded-circle Round an element into circle shape. Example
.rounded-pill Round an element into pill shape. Example
.rounded-0 Remove round corners from an element. Example
.rounded-sm Set smaller border-radius (0.2rem) for an element. Example
.rounded-lg Set larger border-radius (0.2rem) for an 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. represents the size of the margin or padding. The value of the size can be an integer from 0 to 5, or auto.

The size 0 completely removes the margin or padding by setting it to 0, whereas the value auto sets the margin to auto. The integer numbers from 1 to 5 sets the margin or padding incrementally (ranging from 0.25rem to 3rem). Try out the examples to see how it works:

Class Description Test
.mt-# Set the top margin of an element. Example
.mb-# Set the bottom margin of an element. Example
.ml-# Set the left margin of an element. Example
.mr-# Set the right margin of an element. Example
.mx-# Set the left and right margin of an element. Example
.my-# Set the top and bottom margin of an element. Example
.pt-# Set the top padding of an element. Example
.pb-# Set the bottom padding of an element. Example
.pl-# Set the left padding of an element. Example
.pr-# Set the right padding of an element. Example
.px-# Set the left and right padding of an element. Example
.py-# Set the top and bottom padding of an element. Example

Tip: You can also apply negative margins using the margin utility classes. Just append the size number with the character n, like .mt-n1, .mb-n2, and so on.


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.

Class Description Test
.float-left Float an element to the left. Example
.float-right Float an element to the right. Example
.float-none Disable floating from an element. Example
.clearfix Clear floats to prevent parent element from collapsing. Example
.float-*-left Float an element to the left on based on the viewport size. Example
.float-*-right Float an element to the right on based on the viewport size. Example
.float-*-none Disable floating from an element on based on the viewport size. Example

Tip: The * character in the classes .float-*-left and .float-*-right represents responsive breakpoint which can be sm, md, lg, or xl. See Bootstrap grid system for more detail.


Shadow Classes

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

Class Description Test
.shadow Add a shadow to an element. Example
.shadow-sm Add a small shadow to an element. Example
.shadow-lg Add a larger shadow to an element. Example
.shadow-none Remove shadow from an element. Example

Sizing Classes

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

Class Description Test
.w-25 Set the width of an element to 25% of its parent element. Example
.w-50 Set the width of an element to 50% of its parent element. Example
.w-75 Set the width of an element to 75% of its parent element. Example
.w-100 Set the width of an element to 100% of its parent element. Example
.w-auto Set the width of an element to auto, i.e. the browser will calculate and select a width for the specified element. Example
.mw-100 Set the max-width of an element to 100%. Example
.h-25 Set the height of an element to 25% of its parent element. Example
.h-50 Set the height of an element to 50% of its parent element. Example
.h-75 Set the height of an element to 75% of its parent element. Example
.h-100 Set the height of an element to 100% of its parent element. Example
.h-auto Set the height of an element to auto, i.e. the browser will calculate and select a height for the specified element. Example
.mh-100 Set the max-height of an element to 100%. Example
.vw-100 Set the width of an element to 100% of the width of the viewport. Example
.min-vw-100 Set the min-width of an element to 100% of the width of the viewport. Example
.vh-100 Set the height of an element to 100% of the height of the viewport. Example
.min-vh-100 Set the min-height of an element to 100% of the height of the viewport. Example

Vertical Alignment Classes

You can use the vertical alignment utility classes to quickly change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

Class Description Test
.align-baseline Align the baseline of the element with the baseline of its parent. Example
.align-top Align the top of the element with the top of the entire line. Example
.align-middle Align the element in the middle of the parent element. Example
.align-bottom Align the bottom of the element with the bottom of the entire line. Example
.align-text-top Align the top of the element with the top of the parent element's font. Example
.align-text-bottom Align the bottom of the element with the bottom of the parent element's font. Example

Position Classes

You can use the position utility classes to quickly configuring the position of an element.

Class Description Test
.position-static Set the position of element to static. Example
.position-relative Set the position of element to relative. Example
.position-absolute Set the position of element to absolute. Example
.position-fixed Set the position of element to fixed. Example
.position-sticky Set the position of element to sticky. Example
.fixed-top Position an element at the top of the viewport, from edge to edge. Example
.fixed-bottom Position an element at the bottom of the viewport, from edge to edge. Example
.sticky-top Position an element at the top of the viewport, from edge to edge, but that will only happen after you scroll past it. Example

Display Classes

You can use the display utility classes to quickly and responsively toggle the display value of an element. You can also control an element's display when printing the page.

Class Description Test
.d-none Hide an element. It does not take up any space in the layout. Example
.d-inline Force an element to generate an inline-level box. Example
.d-inline-block Force an element to generate a block box that will be flowed with surrounding content i.e. in the same line as adjacent content like inline box. Example
.d-block Force an element to generate a block-level box. Example
.d-table Force an element to behave like a <table> element. Example
.d-table-row Force an element to behave like a <tr> element. Example
.d-table-cell Force an element to behave like a <td> element. Example
.d-flex Force an element to generate a block-level flex container box. Example
.d-inline-flex Force an element to generate an inline-level flex container box. Example

You can also use the responsive breakpoints (sm, md, lg, and xl.) with these display 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.

For a complete set of flex utility classes, please check out the Bootstrap flex reference page.

Tip: You can create print variant of the display classes to change the display value of elements when printing by simply inserting the string print- after .d-, for example, .d-print-none, .d-print-inline, .d-print-block, .d-print-table, and so on.


Miscellaneous Classes

Here's the list some more utility classes that can used for various purposes.

Class Description Test
.close Create generic close icon for dismissing content like modals and alerts. Example
.overflow-auto Provide scrollbars to view overflowed content of an element if required. Example
.overflow-hidden Hide overflowed content of an element. Example
.stretched-link Make an element clickable by stretching a nested link. Example
.visible Make an element visible, without modifying the display. Example
.invisible Make an element invisible, but it still take up space in the page. Example
.sr-only Hide an element to all devices except screen readers. Example
.text-hide Replace an element's text content with a background image. Example
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.