Learn How To Install Bootstrap 4 On Ruby on Rails

0
160
Install Bootstrap 4

Rails is not a programming language. It’s an open source framework which is used for building powerful web applications. Ruby On Rails Framework is built on the ruby programming language. The new version of bootstrap, Bootstrap 4, doesn’t have a Ruby Gem preinstalled in the system . In this article, I am going to help you learn how to install bootstrap 4 on Ruby On Rails. To install bootstrap, first you need to download the railsinstaller from http://railsinstaller.org/en and install it in your machine. We are using the link below to install bootstrap 4 on Ruby On Rails.

https://github.com/twbs/bootstrap-rubygem

To start the project you need to install Node and run a few lines of code on the command line.
1) You can download Node JS from https://nodejs.org
2) Install grunt-cli by using the code below on the command prompt

3) Open a command prompt and run this command:

Now, lets get started with our Rails Application. Open a command prompt as an administrator and go to sites folder to create a rails app.run command with the name “bootstrap4example
rails new bootstrap4example
Go to the bootstrap4example folder and run command below to run a project named ” rails s ”
rails s
The project will run on the localhost http://localhost:3000/ as seen belowL

Rails

Let’s add bootstrap to your Gemfile.

add bootstrap to your Gemfile

Import the bootstrap styles in the application.scss file which is placed in the “app/assets/stylesheets” folder. If you have already generated a new Rails app, it will be come with a .css file. So, rename the C:\Sites\bootstrap4example\app\assets\stylesheets\application.css file with “.scss”extension (for Sass syntax).
Add @import “bootstrap”; in the application.scss file as given below

import bootstrap

Open ” C:\Sites\bootstrap4example\app\assets\javascripts\application.js ” file and add the bootstrap dependencies ” //= require bootstrap-sprockets “ in your application.js as shown below

bootstrap-sprockets

Run ” bundle install “ on the command prompt and restart the server.

Let’s create a static page controller by using the command given:
“ rails generate controller Pages index “

rails generate controller Pages index

Go to the ” C:\Sites\bootstrap4example\config\routes.rb file “ and add the code given below.

routes

Add the code in the image below to your “C:\Sites\bootstrap4example\app\views\pages\index.html.erb” file.

Add HTML Code

Add the below code in your bootstrap 4 “C:\Sites\bootstrap4example\app\views\layouts\application.html.erb” file

below code

Restart the server by using the command given below and you will see that you have successfully installed Bootstrap on your Ruby On Rails.
rails s

Source Code for this installation of Bootstrap on RoR

LEAVE A REPLY

Please enter your comment!
Please enter your name here