Utility classes

Utility classes — formerly helper classes to speed up your development process.

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
.text-primary-hover Set text primary color on hover to all anchor tags under .text-primary-hover container. -
.font-base Apply font family base -
.font-heading Apply font family heading -
.grayscale To apply grayscale filter on image or any section. On hover it will change back to normal -
.rotate-# rotate elements by using this class .rotate-30
.rotate-50
.rotate-180
.rotate-330
.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-9
.z-index-99
.z-index-n9 Set z-index in negative .z-index-n9
.fill-### Fill utilities. You can also set different colors in elements .fill-primary
.fill-danger
.fill-warning
.fill-success
.fill-info
.fill-orange
.fill-white
.fill-dark
.h-### Height utilities. You can also set different height in different Screen sizes by combining with Screen sizes classes h-md-400 .h-300
.h-400
.h-500
.h-540
.h-560
.h-600
.h-700
.rounded-top-right Set border radius in different corners of element .rounded-top-right-0
.rounded-top-right-4
.rounded-top-right-5
.rounded-top-right-6
.rounded-top-right-7
.rounded-top-right-8
.rounded-top-right-9
.rounded-top-right-10
.rounded-top-left Set border radius in different corners of element .rounded-top-left-0
.rounded-top-left-4
.rounded-top-left-5
.rounded-top-left-6
.rounded-top-left-7
.rounded-top-left-8
.rounded-top-left-9
.rounded-top-left-10
.rounded-bottom-right Set border radius in different corners of element .rounded-bottom-right-0
.rounded-bottom-left Set border radius in different corners of element .rounded-bottom-left-0
.box-sm, md, lg, and xl Set box with fixed height and width .box-sm
.box-md
.box-lg
.box-xl