When you are designing your website, you will be relieved to learn that there are easy to use tools online that allow you to create your own website styles that can be applied to your website. The Bootstrap Theme Roller is a great tool for designing your website with javascript.

What is Bootstrap Theme Roller?

The Bootstrap Theme Roller is a Free Open Source utility developed by Twitter that allows you to create website styles that can be reused across different websites or within your own website. The Bootstrap Theme Roller provides a basic user interface that allows a designer with little coding experience to create advanced CSS styles for their website.

The Bootstrap Theme Roller Basic Interface

Bootstrap Theme Roller Basic interfaceThe basic interface settings for the Bootstrap Theme Roller consist of the Base Shadows, Body and Fonts, and Forms and Miscellaneous. The Following table explains each.

Bootstrap Theme Roller Basic Settings
Base Shades The Base shades consists of the basic colors the site will use. You can set any color you want for each field. For example, the Yellow field by default has #ffc40d for the base shadow yellow. You can select a different yellow for this to make your site have a specific type of yellow.
Body and Fonts The Body and Fonts are the base settings for what the Background, Link color, Text color, Heading color, Header border, Font Size, Line Height, Heading Weight, Font Family, and the Heading Font Family. These are global settings that will effect the entire website look.
Forms & Miscellaneous The Form and Miscellaneous contains the settings to style input background, border, radius, Disabled button, Form Action Background, and HR (horizontal rule) Border. This only styles specific Form elements within your sit.

Bootstrap Theme Roller Advanced Interface

Bootstrap Theme Roller Advancd SetingsThe Advanced Settings allows you to add more styles to your site. These style consist od alerts, warnings, buttons, tables styles, and navigation styles. Below is a description of the options for the Advanced Settings.

Bootstrap Theme Roller Advanced Settings
Buttons Bootstrap has default buttons. They are the Info, Success, Danger, Inverse, Warning, and Default buttons. These buttons can be styles to your specific color needs to create different styles of buttons.
Form States and Alerts The Form states and Alerts are the styles of the pop up boxes you would get if your processed a form and there was an error or a dialogue box. The4 types of dialogue boxes are the Warning, Error, Success, and Info pop ups. You can create custom error styles in this section.
Table Settings You can style your tables to have a better look for your tabular data. The table Background, Accent, Hover, and Border can be set here.
Navbar This is a nice feature that is built into Bootstrap. The Navbar Settings allow you to customize your navigation bar at the top of your site. You can change the Height, Background, Highlight, Text color, Link (hover, Active and default) color, Link Background colors, search style, placeholder, and Brand Color (Color of the Website title in the navbar).
Dropdown This styles the look of the drop down menu. The Background, Link and Link hover can be changed here for your dropdown menu.

Custom Bootstrap CSS Styles

Bootstrap Theme Roller Custom stylesOnce you have your styles set for your Bootstrap Theme Roller theme, you can see the changes while you are building the site. This allows you to get an idea of what the styles will look like when you apply them to your Responsive Web Template.

Download stylesAfter you get all the styles dialed in to your liking, you can download the theme to your local computer. When you download the theme, you should have a bootstrap.rar file on your desktop.

Files included in Bootstrap Theme RollerWhen you extract the bootstrap.rar file, you will see the img, js, and css folders with the necessary files for the Bootstrap to be incorporated into your website. (See image to the right) Now that you have the styles you want for your website, we can now move forward to incorporate the CSS styles into your website design.

Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!