Bootstrap Utilities Examples< View Code Snippets Library
Bootstrap 4 Line Height Utility ClassesBootstrap 4
These custom utility classes apply a line height to your text using the class .text-height-(value).
Bootstrap 4 Vertical Align and Absolute CenterBootstrap 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 CSSAll 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 classesBootstrap 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 classesBootstrap 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.