Bootstrapping with Rails

The code I’ve been writing has been elegant and pretty. The actual product and website, not so much. For my latest project, I really wanted to focus on the styling of my application. Rails has streamlined so much of the code with its helpers and associations, building a complex application is attainable anyone with the motivation.

Making that application look like it wasn’t made in the 90’s though takes a different mindset and brain. Bootstrap is a great gateway to adding styles to your webpage. Adding Bootstrap to your rails app takes only a few small steps.

First you need to add the bootstrap gem to your app.

gem 'bootstrap', '~> 5.0.0.beta1'

Then navigate to javascript/packs/application.js. Add the following two lines the top of the file.

import 'bootstrap';
import 'css/site'

Now create a folder and file under /app/javascript. Make a site.scss file so the final file path is /app/javascript/css/site.scss. In the site.scss file you just made you will add one line.

@import "~bootstrap/scss/bootstrap.scss";

After that you should be able to add the pack_tags to the header of your pages and you can style your pages with bootstrap. I put these in the header of my application view so it will be on every page but you may want different styles on every page.

## Put this in the header and you'll be the imported stylesheet
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

There is still a language to familiarize yourself with in bootstrap but the learning curve is much easier and the documentation and examples are thorough. I feel like my application fast forwarded two decades in style with just a little effort. Here is a before and after of my application trying to style with and without bootstrap.

Before: https://meal-swipe.herokuapp.com/

After: https://damp-everglades-83814.herokuapp.com/

Take a look at the style changes I was able to gain in only 2 days and I’m sure there is a lot of customization to learn. Happy bootstrapping.