Extending Bootstrap components using utility classes only, just like Tailwind

In this post, I will talk about the utility classes concept to demonstrate how you can use Bootstrap in a way that allows you to build faster, better, and with no duplicate code or custom CSS classes.

Using the utility API included in the framework, you can create classes like mx-auto or shadow-5 to change the default style of an element, just like Tailwind does. This is a great approach that allows us to remain consistent, by having pre-built patterns (buttons, cards, etc.) and these classes to tweak the components quickly without messing with CSS.

To make things easier in my development process, I created a Bootstrap 5 extension to add new components that are not included in the core of the framework (e.g. avatars), new colors and typography, and an extended set of utility classes to allow you to customize your components directly into you HTML. It is open-source. Here is the demo and the GitHub repo.

Customizing Bootstrap components

How can you customize and extend a Bootstrap component? There are two approaches I recommend:

Using the Sass variables

I highly recommend using Sass when you want to change the default style provided by Bootstrap. Change the padding, color, border using variables. Bootstrap did a great job documenting each component and its variables.

Say you want to change the appearance of the alert component. Head to the documentation and scroll to the Sass variables section. You will find something like this:

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           $border-radius;
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            $border-width;
$alert-bg-scale:                -80%;
$alert-border-scale:            -70%;
$alert-color-scale:             40%;
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Replace the values with your own and compile it to see the changes using Gulp, Webpack, Laravel Mix, or your current setup.

Using utility classes

Instead of creating new custom CSS classes, you can use utilities. These allow you to avoid duplicate code and help you keep things very clean. Every time you need a custom style or behavior for your components, try using utility classes.

Say you want a pill button. Instead of going to your CSS and create a new class:

.btn-pill {
   border-radius: $border-radius-pill
}

It would look something like this:

<button type="button" class="btn btn-primary rounded-pill">Button</button>

So simple right? And this is just the easiest example. Things get much more interesting when you need more complex stuff.

Check out how I used the transform utilities to change the orientation or rotation of an element.

<div class="d-flex">
    <div class="transform translate-x-n1/2 translate-y-n1/2">
    <div class="transform rotate-12"></div>
    <div class="transform skew-x-12"></div>
    <div class="transform scale-50"></div>
</div>

Check out the documentation to see all the utility classes included in Webpixels CSS using the Bootstrap utility API.

Using the responsive breakpoints

Use the .transform-none to remove this behaviour on any breakpoint.

<div class="transform translate-x-32 transform-md-none">
    ...
</div>

Final thoughts

This was just a short introduction to the Bootstrap utility API and how you can use Webpixels CSS to extend the framework's default look and feel.

What do you think about this approach? Is this how you build UIs too, or do you prefer a different method? 🤔