Bootstrap Helper Classes

The helper/utility classes for Bootstrap are covered in this lesson.

The contextual color classes are available to highlight text and convey meaning through different colors.

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

• Try this code

Likewise, the contextual background color classes enable you to emphasize elements with specific background colors.

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

• Try this code

For text formatting and alignment, you can utilize the text alignment classes.

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

• Try this code

When it comes to styling borders and border-radius, the border utility classes come in handy. They are particularly useful for elements like images and buttons.

• .border: Add a border on all sides of an element.
• .border-top: Add a border on the top side of an element.
• .border-end: Add a border on the right side of an element.
• .border-bottom: Add a border on the bottom side of an element.
• .border-start: Add a border on the left side of an element.
• .border-0: Remove the border from all sides of an element.
• .border-top-0: Remove the border from top side of an element.
• .border-end-0: Remove the border from right side of an element.
• .border-bottom-0: Remove the border from bottom side of an element.
• .border-start-0: Remove the border from left side of an element.
• .border-primary: Change the border-color of an element to blue (#007bff).
• .border-secondary: Change the border-color of an element to grey (#6c757d).
• .border-success: Change the border-color of an element to green (#28a745).
• .border-danger: Change the border-color of an element to red (#dc3545).
• .border-warning: Change the border-color of an element to yellow (#ffc107).
• .border-info: Change the border-color of an element to teal (#17a2b8).
• .border-light: Change the border-color of an element to very light grey (#f8f9fa).
• .border-dark: Change the border-color of an element to dark grey (#343a40).
• .border-white: Change the border-color of an element to white (#fff).
• .rounded: Round all corners of an element.
• .rounded-top: Round top-left and top-right corners of an element.
• .rounded-end: Round top-right and bottom-right corners of an element.
• .rounded-bottom: Round bottom-left and bottom-right corners of an element.
• .rounded-start: Round top-left and bottom-left corners of an element.
• .rounded-circle: Round an element into circle shape.
• .rounded-pill: Round an element into pill shape.
• .rounded-0: Remove round corners from an element.
• .rounded-1: Set border-radius of 0.2rem for an element.
• .rounded-2: Set border-radius of 0.25rem for an element.
• .rounded-3: Set border-radius of 0.3rem for an element.

• Try this code

To adjust margins and padding quickly, the spacing utility classes are at your disposal.

The # character in classes like .mt-#, .pt-#, etc., represents the size of the margin or padding, which can be an integer from 0 to 5 or set to auto.

Size 0 completely removes themargin or padding, while integer values from 1 to 5 adjust the margin or padding incrementally.

• .mt-#: Set the top margin of an element.
• .mb-#: Set the bottom margin of an element.
• .ms-#: Set the left margin of an element.
• .me-#: Set the right margin of an element.
• .mx-#: Set the left and right margin of an element.
• .my-#: Set the top and bottom margin of an element.
• .pt-#: Set the top padding of an element.
• .pb-#: Set the bottom padding of an element.
• .ps-#: Set the left padding of an element.
• .pe-#: Set the right padding of an element.
• .px-#: Set the left and right padding of an element.
• .py-#: Set the top and bottom padding of an element.

• Try this code

Tip: Utilizing the margin utilities classes, negative margins may also be applied. Simply add the lettern to the end of the size numbers,such as .mt-n1, .mb-n2, and so on.

For floating elements, you can use the float utility classes to position them to the left or right or remove the float altogether.

• .float-start: Float an element to the left.
• .float-end: Float an element to the right.
• .float-none: Disable floating from an element.
• .clearfix: Clear floats to prevent parent element from collapsing.
• .float-*-start: Float an element to the left on based on the viewport size.
• .float-*-end: Float an element to the right on based on the viewport size.
• .float-*-none: Disable floating from an element on based on the viewport size.

• Try this code

Tip: The symbol * in the classes.The responsive breakpoints represented by .float-*-left and .float-*-right may be sm, md, lg, xl, or xxl. For further information,see the Bootstrap grid system.

To add or remove shadows from elements, the shadow utility classes can be applied.

• .shadow: Add a shadow to an element.
• .shadow-sm: Add a small shadow to an element.
• .shadow-lg: Add a larger shadow to an element.
• .shadow-none: Remove shadow from an element.

• Try this code

For sizing elements, you can take advantage of the sizing utility classes to make them wider or taller.

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

• Try this code

For changing the vertical alignment of inline, inline-block, inline-table, and table cell elements, the vertical alignment utility classes are available.

• .align-baseline: Align the baseline of the element with the baseline of its parent.
• .align-top: Align the top of the element with the top of the entire line.
• .align-middle: Align the element in the middle of the parent element.
• .align-bottom: Align the bottom of the element with the bottom of the entire line.
• .align-text-top: Align the top of the element with the top of the parent element's font.
• .align-text-bottom: Align the bottom of the element with the bottom of the parent element's font.

• Try this code

To configure the position of an element, you can use the position utility classes.

• .position-static: Set the position of element to static.
• .position-relative: Set the position of element to relative.
• .position-absolute: Set the position of element to absolute.
• .position-fixed: Set the position of element to fixed.
• .position-sticky: Set the position of element to sticky.
• .fixed-top: Position an element at the top of the viewport, from edge to edge.
• .fixed-bottom: Position an element at the bottom of the viewport, from edge to edge.
• .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.

• Try this code

The display utility classes allow you to toggle the display value of an element responsively..

• .d-none: Hide an element. It does not take up any space in the layout.
• .d-inline: Force an element to generate an inline-level box.
• .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.
• .d-block: Force an element to generate a block-level box.
• .d-table: Force an element to behave like a <table> element.
• .d-table-row: Force an element to behave like a <tr> element.
• .d-table-cell: Force an element to behave like a <td> element.
• .d-flex: Force an element to generate a block-level flex container box.
• .d-inline-flex: Force an element to generate an inline-level flex container box.

• Try this code

You can also control how an element is displayed when printing the page. Additionally, responsive breakpoints (sm, md, lg, xl, and xxl) can be used with these classes to show or hide elements based on viewport width.

Tip: Furthermore, you can create print variants of the display classes by inserting the string print- after .d-, enabling you to change the display value of elements when printing.

There are many other utility classes available in Bootstrap that serve various purposes.

• .btn-close: Create generic close icon for dismissing components like modals and alerts.
• .overflow-auto: Provide scrollbars to view overflowed content of an element if required.
• .overflow-hidden: Hide overflowed content of an element.
• .overflow-visible: Show overflowed content of an element.
• .overflow-scroll: Provide scrollbars to view overflowed content of an element.
• .stretched-link: Make an element clickable by stretching a nested link.
• .visible: Make an element visible, without modifying the display.
• .invisible: Make an element invisible, but it still take up space in the page.
• .visually-hidden: Hide an element to all devices except screen readers.