Bootstrap 3 Theme Generators

The Bootstrap site contains a page where you can customize the default theme. Unfortunately you cannot see a preview of the theme you’re generating.

This tutorials focuses on free Bootstrap 3 theme generators.

Bootstrap Magic

Bootstrap Jumbotron with different flat colors

With Bootstrap Magic you can style the variables for all the components and directly see a preview for each. Setting values for variables can be done with input fields and with input fields or colorpickers for color variables.

Because Bootstrap Magic is a good way to start styling a new theme I have written another tutorial explaining how to use Bootstrap Magic.


Lavish screenshot

With Lavish you can quickly generate a color scheme for Bootstrap based on an image you upload. You then get a limited preview.

Upload an image from a server and it will generate a theme (it now works with at least jpg and png images).

You can then customize the scheme. A table shows several categories with Bootstrap elements and the color it has linked to each category. Which you can then adapt and/or change into other colors.  Unfortunately you cannot change the combination of elements within those categories.

You can download the CSS style sheet and/or the LESS file. Although the download will provide you with the file  “variables.less” it actually contains all of Bootstrap’s less code. My advice is to only copy and save the variables section. In another (LESS) tutorial I will explain why.

In my opinion Lavish is a fun tool to try but too limited for more serious styling of a Bootstrap theme.

Currently there are only two theme generators really geared to Bootstrap 3. When there will be others I’ll add them in this post.

Add your comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts