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
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
As well as remove
*= require_tree *= require_self
//= require bootstrap-sprockets
//= 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
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
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
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
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.