Simon Köhler

Posted on Aug 26, 2023

4 Expert Tips: How to work with Bootstrap like a Pro

#bootstrap #frontend #css #productivity

Some love it, some hate it. Working with a framework is not everyone's cup of tea. The Bootstrap framework is often said to be cluttered or that all websites end up looking like Bootstrap. I would like to clear up these prejudices.

This is why I love Bootstrap

It is proven and browser compatible
The documentation is very good
It is modular and flexible
It is very widespread
It's very good for fast mockups
Development is consistent

Some Background Info

I started working with CSS/HTML and Web Design professionally when it came on the market. That was a while ago! The first website I created was at cyrcus.com. That was 21 years ago back in 2002!

I've been using Bootstrap since version 3 and have hardly used any other framework in the last few years.

Here are my 4 Expert Tips

1. Use SASS instead of just pure CSS

You could easily embed the Bootstrap framework into your website via a CDN link, and then override the styles using a custom CSS. But this is the method that rather beginners use.

Note: I still do that sometimes to simply create a Mockup for a new project, OR when I need a really simple interface for a backend application.

However, professionals compile the Bootstrap SASS files themselves and thus have full control over the output.

A good and simple app for beginners with SASS is Scout App. Read more about the Bootstrap SASS files here.

2. Use only the components you need

If you already use SASS, you can go one step further and use only certain components of the framework. This increases the performance of your website, since you don't have to load styles for loading bars, for example, if you never use loading bars.

In the following screenshot you can see a SASS file from my website. Here I commented out the components I don't need. This reduces the size of my CSS file from 274 kb to 238 kb. In my case it's not much, but if you have a lot of traffic it pays off. If you need only a few components, e.g. for a simple landin page, you can reduce the file size a lot by including only what you need.

3. Use as many Bootstrap Classes as possible

The Bootstrap framework offers a lot of smart classes to position content or to design it according to the "mobile first" principle. Therefore, you should get used to using these classes whenever possible.

Example: Custom Class VS Bootstrap Class

In the example you can see a comparison between bootstrap classes and custom classes. The HTML markup for the custom class is smaller, of course, but you have to include unnecessary CSS code. Especially if you need breakpoints for display on different devices, the custom CSS gets big fast.

But let's look at the next tip later, which deals with this topic in more detail.

<style type="text/css">
    .custom{
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #cfe2ff;
        padding: 1.5rem;
        margin: 0.25rem;
    }
</style>

<!-- Bootstrap Classes -->
<div class="d-flex align-items-center justify-content-center bg-primary-subtle p-4 m-1">
    <div class="text-center">Bootstrap Like a PRO (Bootstrap CSS)</div>
</div>

<!-- Custom Class -->
<div class="custom">
    <div>Bootstrap Like a PRO (Custom CSS)</div>
</div>

In many projects I've created over the years, only the fonts and colors were replaced, or a few values in the variables were overwritten. I hardly ever use custom classes for spacing or colors anymore. Only for special application purposes, or custom components, adjustments have to be made.

Contrary to many claims: Yes, you can build a Bootstrap website that doesn't look like Bootstrap standard anymore, even without writing your own CSS!

You just have to know HOW.

4. Extend the Bootstrap Classes

Another professional method to save file size, organize codes and increase performance is to extend the bootstrap classes with SASS.

Let's say you wanna create a Custom Button

You can easily create a new CSS class (.btn-custom or whatever...) in your SASS file where you included Bootstrap, and extend it with numerous Bootstrap classes. I don't say with "all" classes, because some cannot be extended due to their structure in the framework.

SASS Code for the Custom Button

// Create custom button by extending the built in classes
.btn-custom{
    @extend .btn-outline-light;
    @extend .text-danger;
    @extend .fw-bold;
    @extend .fs-3;
}

HTML Code for the Custom Button

<a class="btn btn-custom" href="#">CLICK ME</a>

Bootstrap, specifically SASS does not create a new class with lots of code, but adds your custom class to the rendered CSS.

The rendered CSS looks like this:

.btn-outline-light, .btn-custom {
  --bs-btn-color: #f8f9fa;
  --bs-btn-border-color: #f8f9fa;
  --bs-btn-hover-color: #000;
  // More entries...
}

Conclusion

Now you have 4 valuable expert tips to make your Bootstrap project more performant. I will surely post more articles about Bootstrap optimization, so stay tuned!

If you want to get more tips that I don't post on the web, sign up for my free newsletter now: https://simonkoehler.com/newsletter

Thanks for your time and feel free to post a comment with any questions.

DEV Community