Clément Barbaza  Now  About  Posts  Uses

Bootstrap 3 style guide

A simple style guide for Bootstrap 3 to let you have a quick preview of the style of your Bootstrap components.

I love Bootstrap. I use it since the first version for my student, personal, or professional projects.

When I have to do a project, and I use Bootstrap for this project, I usually override or modify the css/less style (colors, style, font...).
But I don't use all the components of Bootstrap, especially in the first versions of the project.
So I only adapt Bootstrap with the style of the project to some components, the ones I use.

But each time I have to iterate the project and I want to use new components I didn't already use in the project, the style isn't consistent with the rest of the project.

To make a clean and consistent style for my project, I have to modify all Bootstrap's components. By doing that, it's easier to add components in the project, because they are already styled according to the project style.

That's why I made a simple Bootstrap 3 style guide.

Bootstrap 3 style guide

Actually, Bootstrap 4 is in development, so the last stable version is Bootstrap 3. That's why this style guide is made for Bootstrap 3.

This style guide is a simple HTML page that displays the majority of the components of Bootstrap.

You just have to create a page in your project (for example, https://example.com/style-guide), then copy and paste the source code of the Bootstrap style guide in this page.

Next, you have to add your css file(s) to see how Bootstrap components look using your custom style.

<link href="style.css" rel="stylesheet">

You can now have a global view of the Bootstrap components, and you can modify your style to harmonize all the components with the rest of the project.


This is the reason why I made this simple Bootstrap 3 style guide. Feel free to use it on your projects to have a consistent style for all your Bootstrap 3 components.