0 0
Read Time:11 Minute, 25 Second

Bootstrap Utility Classes

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

ClassDescriptionTest
.text-primaryApply blue color (#007bff) on text.Example
.text-secondaryApply grey color (#6c757d) on text.Example
.text-successApply green color (#28a745) on text.Example
.text-dangerApply red color (#dc3545) on text.Example
.text-warningApply yellow color (#ffc107) on text.Example
.text-infoApply teal color (#17a2b8) on text.Example
.text-lightApply very light grey color (#f8f9fa) on text.Example
.text-darkApply dark grey color (#343a40) on text.Example
.text-bodyApply Bootstrap’s default body text color (#212529) on text.Example
.text-mutedApply light grey color (#6c757d) on text.Example
.text-whiteApply white color (#fff) on text.Example
.text-black-50Apply 50% transparent black color (rgba(0,0,0,.5)) on text.Example
.text-white-50Apply 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.

ClassDescriptionTest
.bg-primaryApply blue background-color (#007bff) on an element.Example
.bg-secondaryApply grey background-color (#6c757d) on an element.Example
.bg-successApply green background-color (#28a745) on an element.Example
.bg-dangerApply red background-color (#dc3545) on an element.Example
.bg-warningApply yellow background-color (#ffc107) on an element.Example
.bg-infoApply teal background-color (#17a2b8) on an element.Example
.bg-lightApply very light grey background-color (#f8f9fa) on an element.Example
.bg-darkApply dark grey background-color (#343a40) on an element.Example
.bg-whiteApply white background-color (#fff) on an element.Example
.bg-transparentApply 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.

ClassDescriptionTest
.text-startAlign the text to the left.Example
.text-centerAlign the text to the center.Example
.text-endAlign the text to the right.Example
.text-wrapWrap the overflowing text.Example
.text-nowrapPrevent text from wrapping.Example
.text-truncateTruncate the text with an ellipsis.Example
.text-breakBreak the long words to prevent overflow.Example
.text-lowercaseTransform the text to lowercase.Example
.text-uppercaseTransform the text to uppercase.Example
.text-capitalizeCapitalize the first letter of each word.Example
.fw-boldSet the font-weight of an element to bold.Example
.fw-bolderSet the font-weight of an element to bolder (relative to the parent).Example
.fw-normalSet the font-weight of an element to normal.Example
.fw-lightSet the light font-weight for an element.Example
.fw-lighterSet the lighter font-weight for an element (relative to the parent).Example
.fst-italicSet the font-style of an element to italic.Example
.fst-normalSet the font-style of an element to normal.Example
.font-monospaceSet the font-family of an element to monospace font (fixed-width)Example
.text-resetReset the color of a text or link (inherits the color from its parent).Example
.text-decoration-noneRemove the text decoration such as underline from a text.Example
.text-decoration-underlineAdd underline to text.Example
.text-decoration-line-throughAdd line through the middle of 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.

ClassDescriptionTest
.borderAdd a border on all sides of an element.Example
.border-topAdd a border on the top side of an element.Example
.border-endAdd a border on the right side of an element.Example
.border-bottomAdd a border on the bottom side of an element.Example
.border-startAdd a border on the left side of an element.Example
.border-0Remove the border from all sides of an element.Example
.border-top-0Remove the border from top side of an element.Example
.border-end-0Remove the border from right side of an element.Example
.border-bottom-0Remove the border from bottom side of an element.Example
.border-start-0Remove the border from left side of an element.Example
.border-primaryChange the border-color of an element to blue (#007bff).Example
.border-secondaryChange the border-color of an element to grey (#6c757d).Example
.border-successChange the border-color of an element to green (#28a745).Example
.border-dangerChange the border-color of an element to red (#dc3545).Example
.border-warningChange the border-color of an element to yellow (#ffc107).Example
.border-infoChange the border-color of an element to teal (#17a2b8).Example
.border-lightChange the border-color of an element to very light grey (#f8f9fa).Example
.border-darkChange the border-color of an element to dark grey (#343a40).Example
.border-whiteChange the border-color of an element to white (#fff).Example
.roundedRound all corners of an element.Example
.rounded-topRound top-left and top-right corners of an element.Example
.rounded-endRound top-right and bottom-right corners of an element.Example
.rounded-bottomRound bottom-left and bottom-right corners of an element.Example
.rounded-startRound top-left and bottom-left corners of an element.Example
.rounded-circleRound an element into circle shape.Example
.rounded-pillRound an element into pill shape.Example
.rounded-0Remove round corners from an element.Example
.rounded-1Set border-radius of 0.2rem for an element.Example
.rounded-2Set border-radius of 0.25rem for an element.Example
.rounded-3Set border-radius of 0.3rem 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:

ClassDescriptionTest
.mt-#Set the top margin of an element.Example
.mb-#Set the bottom margin of an element.Example
.ms-#Set the left margin of an element.Example
.me-#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
.ps-#Set the left padding of an element.Example
.pe-#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.

ClassDescriptionTest
.float-startFloat an element to the left.Example
.float-endFloat an element to the right.Example
.float-noneDisable floating from an element.Example
.clearfixClear floats to prevent parent element from collapsing.Example
.float-*-startFloat an element to the left on based on the viewport size.Example
.float-*-endFloat an element to the right on based on the viewport size.Example
.float-*-noneDisable 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 smmdlgxl, or xxl. See Bootstrap grid system for more detail.


Shadow Classes

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

ClassDescriptionTest
.shadowAdd a shadow to an element.Example
.shadow-smAdd a small shadow to an element.Example
.shadow-lgAdd a larger shadow to an element.Example
.shadow-noneRemove shadow from an element.Example

Sizing Classes

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

ClassDescriptionTest
.w-25Set the width of an element to 25% of its parent element.Example
.w-50Set the width of an element to 50% of its parent element.Example
.w-75Set the width of an element to 75% of its parent element.Example
.w-100Set the width of an element to 100% of its parent element.Example
.w-autoSet the width of an element to auto, i.e. the browser will calculate and select a width for the specified element.Example
.mw-100Set the max-width of an element to 100%.Example
.h-25Set the height of an element to 25% of its parent element.Example
.h-50Set the height of an element to 50% of its parent element.Example
.h-75Set the height of an element to 75% of its parent element.Example
.h-100Set the height of an element to 100% of its parent element.Example
.h-autoSet the height of an element to auto, i.e. the browser will calculate and select a height for the specified element.Example
.mh-100Set the max-height of an element to 100%.Example
.vw-100Set the width of an element to 100% of the width of the viewport.Example
.min-vw-100Set the min-width of an element to 100% of the width of the viewport.Example
.vh-100Set the height of an element to 100% of the height of the viewport.Example
.min-vh-100Set 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.

ClassDescriptionTest
.align-baselineAlign the baseline of the element with the baseline of its parent.Example
.align-topAlign the top of the element with the top of the entire line.Example
.align-middleAlign the element in the middle of the parent element.Example
.align-bottomAlign the bottom of the element with the bottom of the entire line.Example
.align-text-topAlign the top of the element with the top of the parent element’s font.Example
.align-text-bottomAlign 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.

ClassDescriptionTest
.position-staticSet the position of element to static.Example
.position-relativeSet the position of element to relative.Example
.position-absoluteSet the position of element to absolute.Example
.position-fixedSet the position of element to fixed.Example
.position-stickySet the position of element to sticky.Example
.fixed-topPosition an element at the top of the viewport, from edge to edge.Example
.fixed-bottomPosition an element at the bottom of the viewport, from edge to edge.Example
.sticky-topPosition 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.

ClassDescriptionTest
.d-noneHide an element. It does not take up any space in the layout.Example
.d-inlineForce an element to generate an inline-level box.Example
.d-inline-blockForce 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-blockForce an element to generate a block-level box.Example
.d-tableForce an element to behave like a <table> element.Example
.d-table-rowForce an element to behave like a <tr> element.Example
.d-table-cellForce an element to behave like a <td> element.Example
.d-flexForce an element to generate a block-level flex container box.Example
.d-inline-flexForce an element to generate an inline-level flex container box.Example

You can also use the responsive breakpoints (smmdlgxl, and xxl.) 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-lg-block.d-xl-block.d-xxl-block, and so on.

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.

ClassDescriptionTest
.btn-closeCreate generic close icon for dismissing components like modals and alerts.Example
.overflow-autoProvide scrollbars to view overflowed content of an element if required.Example
.overflow-hiddenHide overflowed content of an element.Example
.overflow-visibleShow overflowed content of an element.Example
.overflow-scrollProvide scrollbars to view overflowed content of an element.Example
.stretched-linkMake an element clickable by stretching a nested link.Example
.visibleMake an element visible, without modifying the display.Example
.invisibleMake an element invisible, but it still take up space in the page.Example
.visually-hiddenHide an element to all devices except screen readers.Example
Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %