Setting up Bootstrap-4-alpha6 in Rails 5

This is a little post in how to setup Bootstrap-4-alpha6 in Rails 5.1.0.

Rails version => 5.1.0.rc1
Bootstrap Ruby Gem => 4.0.0.alpha6

I noticed some guides mentioned installing node.js, which I already had setup. So you could try it without node.js if you want but you might run into some issues that are not covered here.

If you know what you are doing then you could also have a look at the README for the ruby gem at Bootstrap Ruby Gem Github.

To show this in its simplest fashion we are going to create a new rails application

rails new test_app

Inside the Gemfile add

gem 'bootstrap', '~> 4.0.0.alpha6'

And then run

bundle install

Next we will need to rename the app/assets/stylesheets/application.css file to application.scss (the extension could be changed to .sass for Sass syntax) and add

@import "Bootstrap";

As well as remove

*= require_tree
*= require_self

In app/assets/javascripts/application.js add

//= require bootstrap-sprockets
So it looks something like (the require_tree needs to be last)
//= require rails-ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree

That should be all the configuration that is required to setup Bootstrap, now we just need a little proof that it actually works. So we are going to create a static page and take some HTML from a Bootstrap example page and see if it works. The page should look something like this


Bootstrap example

First lets create a static page

rails generate controller StaticPage home

And set the root to this page in the config/routes.rb file by adding the following line

root 'static_page#home'

Now all that is left is to copy and paste the HTML code into the views/static_page/home.html.erb file created by the generate command.

Which will produce this output


Not working correctly

Now you might have noticed that there is a little box at the top of the page. That is meant to be the navbar, but they work differently in Bootstrap-4-alpha6. Therefore we are going to need to change the code to get it to work.

By changing the navbar code to the below

The navbar should now work, although it does look slightly different to the example


Working correctly

You should now be up and running with Bootstrap-4-alpha6! Remember to look at the Bootstrap blog for more information into what has changed in this version.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: