• 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

    All Bootstrap Versions

    Currently, 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

    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

    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