Rails Guide — Part 10 Using Bootstrap

In this week’s Rails blog, we are going to take a look at how to use Bootstrap for our app. We will be using our Flatiron Kitchen app from last week, you can download the code at this GitHub link and follow along.

Bootstrap is a CSS framework that allows a developer to quickly add templates and styles to his/her application. To bring in the latest version of Bootstrap to our existing application, we can simply add this line to the gem file and run bundle install:

gem ‘bootstrap’, ‘~> 5.1’

We can see bootstrap 5.1.0 is successfully installed. Next step is for any of the css files that we want to use Bootstrap, we will need this import statement at the top of the file:

@import “bootstrap”;

The last step is to rename any css files to the scss extension like so:

To test out Bootstrap is working properly, let’s add a class of “btn-primary” to our search button on the header:

Running the Rails server and going to the homepage, we can see the search button has the Bootstrap styling, and many of the other elements also appear differently from before, that is because Bootstrap brought in some of its own styles.

Next let’s add styling to the search bar in the header, specifically some margin to the top and more space for the text input field:

On line 16’s <input> field, I add in two classes.

The first class col-6 sets horizontal width to the search bar. The column class indicates the number of columns we would like to use out of the possible 12 per row. Setting this number to 12 will make the input field occupies the whole row.

The second one mt-2 adds margin top. In Bootstrap, adding margins or paddings to an element follows this format:

{property}{sides}-{size}

Property can be set to m for margin, or p for padding. Notice you can’t set both at the same time with something like mp or pm.

Sides can be anyone of the below:

t for top; b for bottom; l for left; r for right; x for left and right; y for top and bottom; or blank to style all 4 sides.

Size can be 0 (no margin or padding) to 5 (three times the default sizing). Or auto.

Refresh the page and this is looking much better:

The next item I want to tackle is our nav partial. Instead of our own styles, we can take advantage of what Bootstrap offers. It’s as simple as adding a few classes to our existing <ul>, <li>, and <a> tags.

First head over to the application.scss file. We will no longer need lines 13 to 22 where we have our nav stylings, let’s remove them:

Moving forward to the nav partial, we will add in a nav and flex-column classes to our <ul>. Each <li> should have a class of nav-item, and each <a> should have a nav-link class. For all these stylings to work, every child needs to be wrapped in the base nav class. The flex-column class indicates that our nav goes top to bottom. If you have a nav that goes left to right, there’s no need for any other class besides nav.

Refresh our homepage and check out our progress so far:

The last styling I want to add is to our items. At the moment we only have 4 items, let’s add a couple more, stop the server and run rails db:reset

All the items are on one row horizontally, and some are displayed off screen and we have to scroll to the right to see them, which is definitely not a good user experience.

Heading back to the application layout file, if we want to display only 4 items per row, we will have to wrap the <%= yield %> in some special classes. In Bootstrap, the special container class is a way to center and horizontally pad the contents, inside of that, the row class acts as a wrapper for columns.

Now for each of the item, we can simply wrap each in a <div> with a col-3 class. Remember each row has 12 columns, if we made each item col-3, each row would have exactly 4 items.

Running the Rails server again, we can see the items are aligned perfectly:

Try to experiment with different classes of Bootstrap yourself and refer to the official website for more information. I’ve added spacing around each food category, a height to each image, and made each item into a Bootstrap card class. The result is as shown below. Next week we will look at using JavaScript in our Rails app!