John Turknett.com


Bootstrap CSS Framework and Rails

03/27/2014


Adding Bootstrap to Rails is pretty easy with the Asset Pipeline. Granted it would be easier without the Asset Pipeline, but having it has more benefits than the extra overhead for configuration.

You will first want to visit the getbootstrap.com and download the compiled and minified version. Once you extract the files you will have something like this:

    /bootstrap--dist
        /css
            /bootstrap.min.css
            /bootstrap-theme.min.css
        /fonts
        /js
            /bootstrap.min.js

You will want to extract your bootstrap.min.css and the bootstrap-theme.min.css to the Rails /vendor/assets/stylesheets directory. Now alter the /app/assets/stylesheets/application.css so that it looks like the following:

    *= require_self
    += require bootstrap.min
    *= require_tree .
    */

    @font-face {
        font-family: 'Glyphicons Halflings';
        src: url('../assets/glyphicons-halflings-regular.eot');
        src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
        url('../assets/glyphicons-halflings-regular.woff') format('woff'),
        url('../assets/glyphicons-halflings-regular.ttf') format('truetype'),
        url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
    }

After that you need to copy the entire fonts directory into the /app/assets directory. To get the javascript working You will need to copy the bootstrap.min.js into the /vendor/assets/javascripts directory then alter /app/assets/javascripts/application.js to look like the following:

    //= require jquery
    //= require jquery_ujs
    //= require turbolinks
    //= require bootstrap.min
    //= require_tree .

Make sure you reboot your instance and your good to go.