Utilities

Extended utility classes created based on Bootstrap utility API.

Bootstrap provides set of useful utility classes to give an element property a certain value at some state and screen breakpoint. However, sometimes we need more classes and we can extend it via utility API. See how it works here.

Below is an example of extended utility classes for text-decoration property where we add state:hover. You can find all the extended classes at file src/scss/custom/_utilities.scss.

          
  "text-decoration": (
    property: text-decoration,
    state: hover,
    values: none underline line-through
  ),

From above, we will have utility classes as below:

          
  // Bootstrap default utility classes for text-decoration
  .text-decoration-none {
    text-decoration: none !important; 
  }
  
  .text-decoration-underline {
    text-decoration: underline !important; 
  }

  .text-decoration-line-through {
    text-decoration: line-through !important; 
  }

  // Our new utility classes for text-decoration
  .text-decoration-none-hover:hover {
    text-decoration: none !important; 
  }
  
  .text-decoration-underline-hover:hover {
    text-decoration: underline !important; 
  }
  
  .text-decoration-line-through-hover:hover {
    text-decoration: line-through !important; 
  }

In another case, responsive option added to generate responsive classes to existing utility class.

          
  "width": (
    property: width,
    responsive: true,
    class: w,
    values: (
      25: 25%,
      50: 50%,
      75: 75%,
      100: 100%,
      auto: auto
    )
  ),

From above, we will have utility classes as below:

          
  // Bootstrap default utility classes for width
  .w-25 {
    width: 25% !important; 
  }
  
  .w-50 {
    width: 50% !important; 
  }
  
  .w-75 {
    width: 75% !important; 
  }
  
  .w-100 {
    width: 100% !important; 
  }
  
  .w-auto {
    width: auto !important; 
  }

  // Our new utility classes for width
  .w-sm-25 {
    width: 25% !important; 
  }
  
  .w-sm-50 {
    width: 50% !important; 
  }
  
  .w-sm-75 {
    width: 75% !important; 
  }
  
  .w-sm-100 {
    width: 100% !important; 
  }
  
  .w-sm-auto {
    width: auto !important; 
  }

  .w-md-25 {
    width: 25% !important; 
  }
  
  .w-md-50 {
    width: 50% !important; 
  }
  
  .w-md-75 {
    width: 75% !important; 
  }
  
  .w-md-100 {
    width: 100% !important; 
  }
  
  .w-md-auto {
    width: auto !important; 
  }

  .w-lg-25 {
    width: 25% !important; 
  }
  
  .w-lg-50 {
    width: 50% !important; 
  }
  
  .w-lg-75 {
    width: 75% !important; 
  }
  
  .w-lg-100 {
    width: 100% !important; 
  }
  
  .w-lg-auto {
    width: auto !important; 
  }

  .w-xl-25 {
    width: 25% !important; 
  }
  
  .w-xl-50 {
    width: 50% !important; 
  }
  
  .w-xl-75 {
    width: 75% !important; 
  }
  
  .w-xl-100 {
    width: 100% !important; 
  }
  
  .w-xl-auto {
    width: auto !important; 
  }

  .w-xxl-25 {
    width: 25% !important; 
  }
  
  .w-xxl-50 {
    width: 50% !important; 
  }
  
  .w-xxl-75 {
    width: 75% !important; 
  }
  
  .w-xxl-100 {
    width: 100% !important; 
  }
  
  .w-xxl-auto {
    width: auto !important; 
  }

Also, below are new custom utility classes added that might be useful on certain situation.

          
  //
  // Utilities added
  // 
  
  $utilities: map-merge(
    $utilities,
    (
      "transition": (
        property: transition,
        class: transition,
        values: ("all" : all .3s ease-in-out),
      ),
      
    )
  );
  
  //
  // Additional utility classes
  // 
  
  .img-fit-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  //
  // Additional custom font size
  //
  
  .fs-18px {
    font-size: 18px !important;
  }