Bootstrap is a powerful CSS/JS framework which enables you and your design team to produce consistent quality layouts and UI designs with relative ease. However, a common critique of Bootstrap is that it makes everything look too generic.
“All Bootstrap Sites Look The Same”
This is a generalization I’ve come across frequently online and in videos from web/UI designers. It’s not a statement without some merit. Many sites made with Bootstrap end up looking similar, especially if the developer didn’t customize it at all. However, just because you’re using Bootstrap doesn’t mean your project has to look like all the others. In fact, Kevin’s Guides, the site you’re on right now, uses Bootstrap, and I’d argue it looks nothing like the default version. Saying all Bootstrap sites look the same is like saying every Nissan looks the same. When, in fact, Nissans exist in thousands of different combinations of model, year, trim, and color. They might share a few similar components and attributes, but a 2011 Nissan Rogue looks quite different from a 2024 Nissan Pathfinder.
Here are screenshots of basic pages created with Bootstrap 5.3.
I think both of these pages look nice. However, they do share a few similarities. They both use a clean white background, the same color scheme with blue as a primary color, and a card-based layout. Chances are, you’ve seen sites that look almost exactly like this in the past.
All Bootstrap sites looking the same is a fair criticism. However, this is an overgeneralization. Not all sites built with Bootstrap look the same, though many do. Bootstrap has a wide array of different style options that can be easily configured if you have a basic understanding of how SASS works. If you’re afraid of using SASS or just don’t want to, there are a ton of free and paid Bootstrap themes you can select from. Finally, if you’re good with CSS, you can just override the styles you don’t like, or add your own styling in as needed (though learning SASS first is probably still a good idea).
Let’s look at some of the options to make your Bootstrap powered site look a little different.
Bootswatch
By far, the easiest way to change the appearance of a Bootstrapped website is to use Bootswatch. Bootswatch is a collection of Bootstrap themes licensed under MIT. They are freely available and work with varying iterations of Bootstrap, including the most recent versions. To use Bootswatch, simply pick a theme you like and replace Bootstrap’s css file with your new file from Bootswatch. Alternatively, you can use a bootswatch link from a CDN.
Below, you can see what the sample page from above looks like when I replace the default css file with Bootswatch’s cyborg theme.
A lot has changed!
Notice how the layout is the same, but the colors, spacing, and fonts all look a bit different. I think the changes are quite dramatic!
The color contrast isn’t quite perfect in the new theme, but this can be easily remedied by using different classes for the colors.
Here’s what my sample about page looks like with a few other Bootswatch themes, for reference.
Bootstrap Variables
The next easiest way to customize Bootstrap is to make changes to Bootstrap’s _variables.scss file and transpile it using SASS. This is a bit more complicated than using a pre-made theme, or overriding the styles in a separate css file. However, once you learn the basics of using SASS, it becomes a powerful tool to instantly change the look and feel of an entire Bootstrap powered website.
With Bootstrap’s variable customization options, you can add rounded corners to components, change gradients, breakpoints, colors, and more. A full list of all the options can be found in the official Bootstrap Docs.
The steps to get this working are pretty straightforward.
- Install SASS
- Download Bootstrap’s SCSS source
- Make changes to the variables file, usually just setting a variable to true or false.
- Run command to transpile SCSS into CSS
A basic tutorial working with Sass and Bootstrap can also be found in the developer docs.
CSS Overrides
The last way you can change the appearance of a Bootstrap powered site is to load your own additional CSS and have it override Bootstrap’s CSS. Note that this is discouraged, as you are likely loading multiple different styles for the same component. For example, if you create a button using Bootstrap, and you want to make it so the primary button is larger and green instead of the default blue, you could just add this CSS and call it a day.
.btn.btn-primary{
background: purple !important;
color: white !important;
font-size: 2rem !important;
}Code language: CSS (css)Now the blue primary buttons are purple instead of blue. However, the client’s computer now must load Bootstrap’s CSS file and your additional custom CSS file, then figure out that we’re using your css instead of Bootstrap’s in these instances. So we’re forcing the browser to download portions of CSS it’s never going to use. If you’re only making a few small changes, this might not be a big problem. But if you’re going to make a lot of changes, you’re really just fighting against Bootstrap. At that point, you’re better off learning how to use SASS or creating a custom UI library on your own.