Utility classes

Utility classes, formerly known as helper classes, are designed to speed up your development process by providing reusable styles that you can apply directly to your HTML elements.

For faster mobile-friendly and responsive development, Bootstrap includes dozens of utility classes for showing, hiding, aligning, and spacing content.

Bootstrap utilities

We have added new utility classes in theme to speed up your development process. Checkout the list below:

Utility class name Description Available options
.grayscale To apply grayscale filter on image or any section. On hover it will change back to normal -
.line height To apply line height value .lh-0
.lh-base
.opacity-# Set opacity to elements by using this class .opacity-1
.opacity-2
.opacity-3
.opacity-4
.opacity-5
.opacity-6
.opacity-7
.opacity-8
.opacity-9
.z-index-# Set z-index .z-index-0
.z-index-1
.z-index-2
.z-index-9
.z-index-99
.h-### Height utilities. You can also set different height in different Screen sizes by combining with Screen sizes classes
h-md-400px		 .h-20px
.h-30px
.h-40px
.h-50px
.h-60px
.h-100px
.h-150px
.h-200px
.h-250px
.h-300px
.h-400px
.h-500px
.h-600px
.h-700px
.h-750px
.w-### Width utilities. You can also set different width in different Screen sizes by combining with Screen sizes classes
w-md-300px		 .w-20px
.w-30px
.w-40px
.w-50px
.w-80px
.w-150px
.w-200px
.w-250px
.w-300px
.icon-xs, .icon-sm, md, lg, xl and xxl Set icon box with fixed height and width .icon-xs
.icon-sm
.icon-md
.icon-lg
.icon-xl
.icon-xxl
.icon-xxxl
.rotate-# Add rotation to element .rotate-13
.rotate-180
.rotate-270
.rotate-335
.rotate-343
.rotate-350
.fill-# fill color for element .fill-primary
.fill-secondary
.fill-white
.fill-success
.fill-info
.fill-warning
.fill-danger
.fill-light
.fill-dark
.fill-orange
.fill-body-bg
.fill-mode
.blur-# Add blur effect to element .blur-1
.blur-2
.blur-3
.blur-4
.blur-5
.blur-6
.blur-7
.blur-8
.blur-9