A list of useful bootstrap 4 utilities (classes) to make your web development easier

What are bootstrap utilities?

I have given a short description about bootstrap 4 in my last post, check it here

Bootstrap 4 utilities are a set of useful css classes  which can be used to easily develop webpages and improve your development performance. All bootstrap components internally use these classes to look the awesome way they look.

Why should we use them?

  • No need to reinvent the wheel! You dont have to invest time to write the basic css classes needed to make the  web development of a webpage faster.
  • Improves your development performance : Suppose you have a h2 tag and you need to align the text to the center. Normally you will target the selector and add the property text-align: center to it. Even better way is you will define a class called text-center and add property to it. then . you will use the class every where you need the css of text-center. That is what bootstrap does for you. It already has a library of such utility class which we can use and save us a lot of headache and time.

Classes list

vertical align

.align-baseline    { vertical-align: baseline !important; } // Browser default
.align-top         { vertical-align: top !important; }

.align-middle      { vertical-align: middle !important; }

.align-bottom      { vertical-align: bottom !important; }

.align-text-bottom { vertical-align: text-bottom !important; }

.align-text-top    { vertical-align: text-top !important; }

Colors

.bg-white {background-color: $white !important;}
.bg-transparent {background-color: transparent !important;}

Borders

.border         { border: $border-width solid $border-color !important; }

.border-top     { border-top: $border-width solid $border-color !important; }

.border-right   { border-right: $border-width solid $border-color !important; }

.border-bottom  { border-bottom: $border-width solid $border-color !important; }

.border-left    { border-left: $border-width solid $border-color !important; }

.border-0        { border: 0 !important; }

.border-top-0    { border-top: 0 !important; }

.border-right-0  { border-right: 0 !important; }

.border-bottom-0 { border-bottom: 0 !important; }

.border-left-0   { border-left: 0 !important; }
border-colors
.border-white { border-color: $white !important;}
border-radius
.rounded-sm { border-radius: $border-radius-sm !important;}
.rounded { border-radius: $border-radius !important;}
.rounded-top {border-top-left-radius: $border-radius !important;
  border-top-right-radius: $border-radius !important;}
.rounded-right {border-top-right-radius: $border-radius !important;
  border-bottom-right-radius: $border-radius !important;}
.rounded-bottom { border-bottom-right-radius: $border-radius !important;
  border-bottom-left-radius: $border-radius !important;}
.rounded-left {border-top-left-radius: $border-radius !important; border-bottom-left-radius: $border-radius !important;}
.rounded-lg {border-radius: $border-radius-lg !important;}
.rounded-circle {border-radius: 50% !important;}
.rounded-pill {border-radius: $rounded-pill !important;}
.rounded-0 { border-radius: 0 !important;}

Clearfix

.clearfix {@include clearfix();}

Display

  • .d#{$infix}-#{$value} { display: $value !important; }
    • “d-” is prefix/shortform for ‘display’
    • {$infix} is where you can provide breakpoint values like “lg”, “md”, “sm”.
    • {$value} is the type of display value you can provide like “block”, “flex” etc.
  • .d-print-#{$value} { display: $value !important; } : display class syntax same as above but for print.
example: d-inline-flex

Flexbox classes

 .flex#{$infix}-row            { flex-direction: row !important; }
    .flex#{$infix}-column         { flex-direction: column !important; }
    .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
    .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }

    .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
    .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
    .flex#{$infix}-fill         { flex: 1 1 auto !important; }
    .flex#{$infix}-grow-0       { flex-grow: 0 !important; }
    .flex#{$infix}-grow-1       { flex-grow: 1 !important; }
    .flex#{$infix}-shrink-0     { flex-shrink: 0 !important; }
    .flex#{$infix}-shrink-1     { flex-shrink: 1 !important; }

    .justify-content#{$infix}-start   { justify-content: flex-start !important; }
    .justify-content#{$infix}-end     { justify-content: flex-end !important; }
    .justify-content#{$infix}-center  { justify-content: center !important; }
    .justify-content#{$infix}-between { justify-content: space-between !important; }
    .justify-content#{$infix}-around  { justify-content: space-around !important; }

    .align-items#{$infix}-start    { align-items: flex-start !important; }
    .align-items#{$infix}-end      { align-items: flex-end !important; }
    .align-items#{$infix}-center   { align-items: center !important; }
    .align-items#{$infix}-baseline { align-items: baseline !important; }
    .align-items#{$infix}-stretch  { align-items: stretch !important; }

    .align-content#{$infix}-start   { align-content: flex-start !important; }
    .align-content#{$infix}-end     { align-content: flex-end !important; }
    .align-content#{$infix}-center  { align-content: center !important; }
    .align-content#{$infix}-between { align-content: space-between !important; }
    .align-content#{$infix}-around  { align-content: space-around !important; }
    .align-content#{$infix}-stretch { align-content: stretch !important; }

    .align-self#{$infix}-auto     { align-self: auto !important; }
    .align-self#{$infix}-start    { align-self: flex-start !important; }
    .align-self#{$infix}-end      { align-self: flex-end !important; }
    .align-self#{$infix}-center   { align-self: center !important; }
    .align-self#{$infix}-baseline { align-self: baseline !important; }
    .align-self#{$infix}-stretch  { align-self: stretch !important; }

Float

.float#{$infix}-left  { float: left !important; }
    .float#{$infix}-right { float: right !important; }
    .float#{$infix}-none  { float: none !important; }

Overflow

.overflow-#{$value} { overflow: $value !important; }

Position

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: $zindex-fixed;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-fixed;
}

.sticky-top {
  @supports (position: sticky) {
    position: sticky;
    top: 0;
    z-index: $zindex-sticky;
  }
}

ScreenReaders

.sr-only {
  @include sr-only();
}

.sr-only-focusable {
  @include sr-only-focusable();
}

Box shadow

.shadow-sm { box-shadow: $box-shadow-sm !important; }
.shadow { box-shadow: $box-shadow !important; }
.shadow-lg { box-shadow: $box-shadow-lg !important; }
.shadow-none { box-shadow: none !important; }

Width and height

@each $prop, $abbrev in (width: w, height: h) {
  @each $size, $length in $sizes {
    .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
  }
}

.mw-100 { max-width: 100% !important; }
.mh-100 { max-height: 100% !important; }

// Viewport additional helpers

.min-vw-100 { min-width: 100vw !important; }
.min-vh-100 { min-height: 100vh !important; }

.vw-100 { width: 100vw !important; }
.vh-100 { height: 100vh !important; }

Margin and padding

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (margin: m, padding: p) {
      @each $size, $length in $spacers {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}t#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-top: $length !important;
        }
        .#{$abbrev}r#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-right: $length !important;
        }
        .#{$abbrev}b#{$infix}-#{$size},
        .#{$abbrev}y#{$infix}-#{$size} {
          #{$prop}-bottom: $length !important;
        }
        .#{$abbrev}l#{$infix}-#{$size},
        .#{$abbrev}x#{$infix}-#{$size} {
          #{$prop}-left: $length !important;
        }
      }
    }

    // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
    @each $size, $length in $spacers {
      @if $size != 0 {
        .m#{$infix}-n#{$size} { margin: -$length !important; }
        .mt#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-top: -$length !important;
        }
        .mr#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-right: -$length !important;
        }
        .mb#{$infix}-n#{$size},
        .my#{$infix}-n#{$size} {
          margin-bottom: -$length !important;
        }
        .ml#{$infix}-n#{$size},
        .mx#{$infix}-n#{$size} {
          margin-left: -$length !important;
        }
      }
    }

    // Some special margin utils
    .m#{$infix}-auto { margin: auto !important; }
    .mt#{$infix}-auto,
    .my#{$infix}-auto {
      margin-top: auto !important;
    }
    .mr#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-right: auto !important;
    }
    .mb#{$infix}-auto,
    .my#{$infix}-auto {
      margin-bottom: auto !important;
    }
    .ml#{$infix}-auto,
    .mx#{$infix}-auto {
      margin-left: auto !important;
    }
  }
}

Text

.text-justify  { text-align: justify !important; }
.text-wrap     { white-space: normal !important; }
.text-nowrap   { white-space: nowrap !important; }
.text-truncate { @include text-truncate; }
Responsive
    .text#{$infix}-left   { text-align: left !important; }
    .text#{$infix}-right  { text-align: right !important; }
    .text#{$infix}-center { text-align: center !important; }
Transform
.text-lowercase  { text-transform: lowercase !important; }
.text-uppercase  { text-transform: uppercase !important; }
.text-capitalize { text-transform: capitalize !important; }
Font weight and style
.font-weight-light   { font-weight: $font-weight-light !important; }
.font-weight-lighter { font-weight: $font-weight-lighter !important; }
.font-weight-normal  { font-weight: $font-weight-normal !important; }
.font-weight-bold    { font-weight: $font-weight-bold !important; }
.font-weight-bolder  { font-weight: $font-weight-bolder !important; }
.font-italic         { font-style: italic !important; }
color
.text-white { color: $white !important; }

@each $color, $value in $theme-colors {
  @include text-emphasis-variant(".text-#{$color}", $value);
}

.text-body { color: $body-color !important; }
.text-muted { color: $text-muted !important; }

.text-black-50 { color: rgba($black, .5) !important; }
.text-white-50 { color: rgba($white, .5) !important; }
Misc
.text-hide {
  @include text-hide($ignore-warning: true);
}

.text-decoration-none { text-decoration: none !important; }

.text-break {
  word-break: break-word !important; // IE & < Edge 18
  overflow-wrap: break-word !important;
}
Reset
.text-reset { color: inherit !important; }

Visibility

.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

Bonus

I have also created a codepen which contains the implementation of all the classes mentioned above. I am sharing it with you guys Hope it helps.

Conclusion

Now that we have the list of all classes available in bootstrap, the next time you use bootstrap 4 you will be able to use it to its fullest unlike using just its prebuild grid and components which by the way is a life saver for us frontend developers. LOL.

Let me know if I have missed any useful classes. Enlighten me if I have in the comments section below.

2
2