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.

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-start`	Align the text to the left.	Example
`.text-center`	Align the text to the center.	Example
`.text-end`	Align the text to the right.	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
`.fw-bold`	Set the font-weight of an element to bold.	Example
`.fw-bolder`	Set the font-weight of an element to bolder (relative to the parent).	Example
`.fw-normal`	Set the font-weight of an element to normal.	Example
`.fw-light`	Set the light font-weight for an element.	Example
`.fw-lighter`	Set the lighter font-weight for an element (relative to the parent).	Example
`.fst-italic`	Set the font-style of an element to italic.	Example
`.fst-normal`	Set the font-style of an element to normal.	Example
`.font-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
`.text-decoration-underline`	Add underline to text.	Example
`.text-decoration-line-through`	Add 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.

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-end`	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-start`	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-end-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-start-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-end`	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-start`	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-1`	Set border-radius of 0.2rem for an element.	Example
`.rounded-2`	Set border-radius of 0.25rem for an element.	Example
`.rounded-3`	Set 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:

Class	Description	Test
`.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.

Class	Description	Test
`.float-start`	Float an element to the left.	Example
`.float-end`	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-*-start`	Float an element to the left on based on the viewport size.	Example
`.float-*-end`	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, xl, 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.

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

Class	Description	Test
`.btn-close`	Create generic close icon for dismissing components 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
`.overflow-visible`	Show overflowed content of an element.	Example
`.overflow-scroll`	Provide scrollbars to view 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
`.visually-hidden`	Hide an element to all devices except screen readers.	Example

About Post Author

Gaurav Dixit

dgaurav300@gmail.com

http://blog.softhubsolution.com

Happy

0 %

Sad

0 %

Excited

0 %

Sleepy

0 %

Angry

0 %

Surprise

0 %

Post Views: 38