Bootstrap Utilities Examples

< View Code Snippets Library

  • Bootstrap 4 Line Height Utility Classes

    Bootstrap 4 Line Height Utility Classes

     Bootstrap 4

    These custom utility classes apply a line height to your text using the class .text-height-(value).

  • Bootstrap 4 Vertical Align and Absolute Center

    Bootstrap 4 Vertical Align and Absolute Center

     Bootstrap 4

    This demonstrates how to use the Bootstrap flexbox utility classes to perform some common layout cases: vertical alignment and both vertical and horizontal centering of content. It is important to set the body and html to 100% and give your parent container some height. Get Flexbox Cheat Sheet

  • Bootstrap Opacity Classes – Custom CSS

    Bootstrap Opacity Classes – Custom CSS

     All Bootstrap Versions

    Update: Bootstrap 5 now includes opacity utility classes. Below are custom styles you can use in older versions.

     

    Bootstrap 4 does not have any opacity utility classes. You can add this to a custom stylesheet to quickly add the ability to write .opacity-(0-5) to change the opacity of an element.

    • 0 = opacity: 0;
    • 1 = opacity: 0.2;
    • 2 = opacity: 0.4;
    • 3 = opacity: 0.6;
    • 4 = opacity: 0.8;
    • 5 = opacity: 1;
  • Grayscale text color utility classes

    Grayscale text color utility classes

     Bootstrap 4

    Bootstrap 4 does not have built-in text color classes for levels of gray that you can use in your layouts. Add these CSS styles to your project to change that.

  • Grayscale background color utility classes

    Grayscale background color utility classes

     Bootstrap 4

    Bootstrap 4 does not have built in classes for levels of gray that you can use in your layouts. Add these CSS styles to your project to change that.

Looking for something else?

Suggest or contribute a code snippet to be added to the library.

Other Code Snippet Categories