How to use bootstrap

Rails Bootstrap

Embrace and use the bootstrap classes as much as possible, otherwise you can run into problems or make life very hard for yourself the further into the styling you go.

As well as using the classes for styling, it is absolutely crucial to use bootstrap's own variables. For example, setting the font-size-base variable to 16px will cause the entire site's typography to change accordingly, as headings sizes, paragraph font-sizes etc, all inherit from this. Same goes for colour schemes, hover-states, border colours etc etc.

"Using bootstrap's classes and employing its variables as much as you can, and writing as little of your own css as possible, is the key to bootstrap joy." ~ Andrew Stelmach, 2015

How to do it

Refer to http://getbootstrap.com for using classes and (if you're feeling adventurous) bootstrap's jquery plugins.

Changing variables

Go to http://getbootstrap.com/customize/#less-variables and decide which one you want to change. Have a peruse of this - you'll see that there are many many variables, which means an awful lot of the changes you might want to make are best done by working with the variables. For example, you might want to change the background colour of the 'default' style of button. This is best done by assigning the desired colour to the btn-default-bg variable; the button's hover-colour and border colour will all be calculated automatically from the value of this variable, making your job much easier.

For an example, we'll change the value of the @font-size-base variable to 18px.

The imports and files have been setup already for this app. All you need to do is change the @ to a $ and assign the desired value to it, so:

Simply insert $body-bg: 18px; into assets/stylesheets/bootstrap-variables.scss and it's done.