How to customize a Bootstrap 3 theme

A Bootstrap 3 theme is mobile-first and of course responsive. The components and jQuery plugins available in Bootstrap 3 allow you to quickly create a modern website.

In this tutorial you will learn how to customize a Bootstrap 3 theme. To achieve this we’ll use Bootstrap Magic.

Bootstrap Magic

Bootstrap Magic has been created solely for the purpose to make customization of a the Bootstrap 3 theme as easy and user-friendly as possible.

The official Bootstrap site also offers an option to customize the theme. Bootstrap Magic in my opinion has the considerable advantage that you can immediately see how you theme will look after each change.

Go to Bootstrap Magic and click on the button Bootstrap Magic button to open the Theme editor.

Customization with input fields

Below you can see 2 Bootstrap 3 components: the Jumbotron and Pagination. The image shows what these components look like with the default Bootstrap 3 theme.

With Bootstrap Magic we can customize components with the use of input fields which you’ll see to the left of each component:

When we change those default values we see a new theme for the Jumbotron:

Bootstrap Jumbotron with different flat colors

Make sure you click the Apply button (bottom left) otherwise the preview will stay the same! And even worse: saving your theme later on will only result in a copy of the default theme.

Customization with Colorpickers

Bootstrap Magic has a second option to customize a component: the Colorpickers. To the right of each input field you can see a Colorpicker:

To customize the Pagination component we can use the colorpicker and get a customized Pagination like this:

Bootstrap Pagination component with different flat colors

Not all of the properties of a component can be customized with the input fields or colorpickers shown to the left of a component. To change the color of the numbers in the Pagination component for instance you need to change the variable @link-color (which can be found in the Scaffolding section).

Do not forget to check if the hover states of the component is to your satisfaction. After having made your initial changes hover over the elements of a component to see if the hover state doesn’t detonate with the rest of your new theme.

Saving your custom theme

When you are satisfied with your new Bootstrap 3 theme click on the button ‘Save CSS’ (at the bottom). This will save your customized theme in a file called ‘magic-bootstrap.css’. This file contains the complete bootstrap style sheet.

If you are not impressed with the changes to your theme you can do a reset. Simply click on the ‘Reset’ button (at the bottom). But take care because this will reset all the changes that you made. When I use Bootstrap Magic I open it in 2 windows/tabs. In one window I make the changes. The other window becomes useful when I am not satisfied with one of my changes and want to return to the default. It serves as my memory for the default values which I can than look up and re-insert in the window with the other changes.

To use you custom theme simply add a link to the file ‘magic-bootstrap.css’ in the head section of your Bootstrap page (below the link to the default ‘bootstrap.css’ file).

Bootstrap Magic makes it possible to customize all of the Bootstrap 3 components. But only on a basic level. In a later tutorial I will show you how you can customize the theme further (by using the LESS files).

Add your comment

Related Posts