Build you rails project with bootstrap 4

Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.

Let’s see how we can use it in our rails project.

Add bootstrap to your Gemfile:

gem 'bootstrap', '~> 4.1.3'

Ensure that sprockets-rails is at least v2.3.2.

bundle install and restart your server to make the files available through the pipeline.

Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:

$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Import Bootstrap styles in app/assets/stylesheets/application.scss:

// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";

Then, remove all the *= require and *= require_tree statements from the Sass file. Instead, use @import to import Sass files.

Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins and variables.

Bootstrap JavaScript depends on jQuery. If you’re using Rails 5.1+, add the jquery-rails gem to your Gemfile:

gem 'jquery-rails'

Bootstrap tooltips and popovers depend on popper.js for positioning. The bootstrap gem already depends on the popper_js gem.

Add Bootstrap dependencies and Bootstrap to your application.js:

//= require jquery3
//= require popper
//= require bootstrap-sprockets

It will now look like this

//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require jquery3
//= require popper
//= require bootstrap-sprockets
//= require_tree .

Done! Now we can start our bootstrap journey!

Let’s see an example of bootstrap navbar.

If you want to have the same navbar on every webpage, we can create a new folder app/views/shared,then create a new navbar partial in app/views/shared folder, _navbar.html.erb.

In our app/views/layouts/application.html.erb,we can render this partial .

<body>
<%= render 'shared/navbar' %>
<%= yield %>
</body>

Now let’s got to bootstrap website https://getbootstrap.com/

Go to documentation and search navbar, find something you like and click copy

paste the whole code in your app/views/shared/_navbar.html.erb

refresh webpage ,we can see

everywhere you go, same navbar

Now we can do some styling in app/assets/stylesheets/application.scss file

@import "bootstrap";
body{
background-color: #cee0d3;
font-size: 14px;
color:#262626;
}

Let’s see how to set a full background image on our users’s index page

app/views/users/index.html.erb

<body>
<div class="bg"></div>
</body>

Then in app/assets/stylesheets/application.scss file

body,html {
height: 100%;
}
.bg {
/* The image used */
background-image: url("https://images.unsplash.com/photo-1508717146309-25a0019d0381?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1d56e8467d3ce6b1b4781bfa73c96e05&auto=format&fit=crop&w=1951&q=80");
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}

Bamm!

We can also use some other awesome features like carousel in bootstrap,make your front page much better!

//in our view page
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" width="1100" height="500">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>We had such a great time in LA!</p>
</div>
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" width="1100" height="500">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" width="1100" height="500">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
carousel