Utility classes

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

Bootstrap utilities
Class Description Options
w-# Width for component in % .w-10 .w-25 .w-50 .w-60 .w-75 .w-100
h-# Height for component in % .h-10 .h-25 .h-50 .h-60 .h-75 .h-100
vh-# Viewport Height for component in % .vh-50 .h-75 .vh-100
width-#x Width for component in REM .width-1x .width-2x .width-3x .width-4x .width-5x .width-5x .width-6x .width-7x .width-8x .width-9x .width-10x .width-11x .width-12x .width-13x .width-14x .width-15x .width-16x .width-17x .width-18x .width-19x .width-20x
height-#x Height for component in REM .height-1x .height-2x .height-3x .height-4x .height-5x .height-5x .height-6x .height-7x .height-8x .height-9x .height-10x .height-11x .height-12x .height-13x .height-14x .height-15x .height-16x .height-17x .height-18x .height-19x .height-20x
flip- Flip component vertical / Horizontal .flip-y .flip-x
z-index-# Set z-index for component .z-index-1 .z-index-2 .z-index-3 .z-index-fixed
z-index-n# Set Negetive z-index for component .z-index-n1
rounded-# Set corner radius for component .rounded-1 .rounded-2 .rounded-3 .rounded-4 .rounded-5 .rounded-block .rounded-blob .rounded-pill .rounded-circle
rounded-top-# Set top corner radius for component .rounded-top .rounded-top-3.rounded-top-4.rounded-top-5 .rounded-top-block.rounded-top-pill
rounded-bottom-# Set bottom corner radius for component .rounded-bottom .rounded-bottom-3.rounded-bottom-4.rounded-bottom-5 .rounded-bottom-block.rounded-bottom-pill
rounded-top-start-# Set top left corner radius for component .rounded-top-start .rounded-top-start-3.rounded-top-start-4.rounded-top-start-5 .rounded-top-start-block.rounded-top-start-pill
rounded-top-end-# Set top right corner radius for component .rounded-top-end .rounded-top-end-3.rounded-top-end-4 .rounded-top-end-5 .rounded-top-end-block.rounded-top-end-pill
rounded-bottom-start-# Set bottom left corner radius for component .rounded-bottom-start .rounded-bottom-start-3.rounded-bottom-start-4.rounded-bottom-start-5 .rounded-bottom-start-block.rounded-bottom-start-pill
rounded-bottom-end-# Set bottom right corner radius for component .rounded-end-start .rounded-end-start-3 .rounded-end-start-4.rounded-end-start-5 .rounded-end-start-block.rounded-bottom-end-pill
shadow-# Set box-shadow for component .shadow-sm .shadow .shadow-lg .shadow-xl .shadow-3d .shadow-none
hover-shadow-# Set box-shadow on hover for component .hover-shadow-sm .hover-shadow .hover-shadow-lg .hover-shadow-xl .hover-shadow-3d
hover-lift-# Translate 3d on hover .hover-lift .hover-lift-lg
bg-shade-# Darken background color for component .bg-shade-primary .bg-shade-info .bg-shade-success .bg-shade-danger .bg-shade-warning .bg-shade-gray-200 .bg-shade-gray-800 .bg-shade-secondary .bg-shade-light .bg-shade-dark
bg-gradient-# Gradient background color for component .bg-gradient-primary .bg-gradient-secondary .bg-gradient-light .bg-gradient-dark .bg-gradient-white .bg-gradient-tint