Our Rails applications to this point have had a very basic look. But it is possible to style them to make them more usable and attractive, using CSS and JavaScript. For this lesson, we will learn about the Bootstrap library of CSS styles and utilities. Bootstrap is an efficient way to style your application so that it has a consistent and responsive appearance, regardless of the browser or device that is used to view it.

Application aesthetics are important for your career success, so learning styling skills will be valuable to you.

To learn bootstrap, we will use this Treehouse course: Bootstrap 4 Ba sics. You do not need to do this in your own development environment. When you bring up the video, it will allow you to launch a Treehouse workspace where you can try the various steps the instructor does. The important ideais that you can go to the Bootstrap s ite, copying the examples you need and then customizing them to suit your purpose.

Note: Inclusion of bootstrap in Rails is significantly different for Rails 6. Rails 6 is beyond the scope of this course.

Setup

gem install bundler
bundle install
bin/rails db:migrate

Then start the server and have a look at the application. Create a shark, just giving it the name of Great White and under Facts just put: Scary.

As you can see, the application has not been styled at all. We will use Bootstrap to style it.

Before you make any changes, create a git branch called bootstrap, and make your changes inside that.

Adding Bootstrap

First edit the Gemfile . Add these lines.

gem ‘jquery-rails’
gem ‘bootstrap’

They should go in the main section, above the line

“group :development, :test do”

Then do

bundle install

To load these gems.

Next, edit app/assets/javascripts/application.js

add these lines to the bottom:

//= require jquery3
//= require popper
//= require bootstrap

Next, rename app/assets/stylesheets/application.css to application.css.scss. Take the = sign out of the line that says require font-awesome, as we are going to import it. Then add all the lines in application.cssaddition to application.css.scss. This includes some @import statements, which are the important ones, plus customization of the bootstrap appearance with new styles.

Then, make sure the app still works. It still hasn’t been styled. The bootstrap css and javascript libraries are present, but they aren’t yet being used. The css that has been applied makes some of the buttons invisible, unfortunately, but we’ll fix that.

Styling with bootstrap classes

Do this command to create a controller:

bin/rails generate controller home index

Edit the config/routes.rb file. Change:

root 'sharks#index'

root 'home#index'

Next, edit app/views/layouts/application.html.erb to match this:

<!DOCTYPE html>
<html>
  <head>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "About Sharks" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "About Sharks" %>">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  </head>
  <body>
    <header>
      <%= render 'layouts/navigation' %>
    </header>
    <main role="main">
    <%= content_for?(:content) ? yield(:content) : yield %>
    </main>
  </body>
</html>

Explanation: The viewport meta tag is recommended by bootstrap for behaviors responsive to the browser screen size. The title is set up to be rendered flexibly, as is the meta tag for site description. The header section is set up to render a navigation bar. This will be in a partial that we haven’t yet created. The yield statement in the main section is set up to give logic to the view that will be rendered. If the content block is set, the application will yield the associated layout (yield with parameter), but if not, the yield without parameters will give the default view of the home controller.

Then create the navigation bar partial as app/views/layouts/_navigation.html.erb . It should read as follows:

<nav class="navbar navbar-dark navbar-static-top navbar-expand-md">
  <div class="container">
    <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
    </button> <%= link_to "Everything Sharks", root_path, class: 'navbar-brand' %>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav mr-auto">
      <li class='nav-item'><%= link_to 'Home', home_index_path, class: 'nav-link' %></li>
      <li class='nav-item'><%= link_to 'Sharks', sharks_path, class: 'nav-link' %></li>
    </ul>
    </div>
  </div>
</nav>

This is a control borrowed directly from the bootstrap navbar examples, but with link_to paths defined, instead of using static hrefs.

Now we define a layout that will be rendered when the yield(:content) call is made. This is to be created in in app/views/layouts/sharks.html.erb . It should read as follows:

<% content_for :content do %>
  <div class="jumbotron text-center">
    <h1>Shark Info</h1>
  </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <p><%= yield %></p>
      </div>
      <div class="col-lg-6">
        <p>
          <div class="caption">You can always count on some sharks to be friendly and welcoming!</div>
          <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
        </p>
      </div>
    </div>
  </div>
<% end %>
<%= render template: "layouts/application" %>

Next, we have to create the view for the application home page, in app/views/home/index.html . That file should read as follows:

<div class="jumbotron">
  <div class="container">
    <h1>Want to Learn About Sharks?</h1>
    <p>Are you ready to learn about sharks?</p>
    <br>
    <p>
      <%= button_to 'Get Shark Info', sharks_path, :method => :get,  :class => "btn btn-primary btn-lg"%>
    </p>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-lg-6">
      <h3>Not all sharks are alike</h3>
      <p>Though some are dangerous, sharks generally do not attack humans. Out of the 500 species known to researchers, only 30 have been known to attack humans.
      </p>
    </div>
    <div class="col-lg-6">
      <h3>Sharks are ancient</h3>
      <p>There is evidence to suggest that sharks lived up to 400 million years ago.
      </p>
     </div>
  </div>
</div>

Finally, we have to style the buttons in the other views.

In app/views/sharks/index.html.erb, replace

<%= link_to 'New Shark', new_shark_path %>

with

<%= link_to 'New Shark', new_shark_path, :class => "btn btn-primary btn-sm" %> <%= link_to 'Home', home_index_path, :class => "btn btn-primary btn-sm" %>

which styles the buttons and adds a home link. Similarly, style the button at the bottom of the app/views/sharks/new.html.erb, so that it looks like:

<%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

Then style the buttons in the show view, app/views/sharks/show.html.erb, so that they look like:

<%= link_to 'Edit', edit_shark_path(@shark), :class => "btn btn-primary btn-sm" %> <%= link_to 'Back', sharks_path, :class => "btn btn-primary btn-sm" %>

That finishes the bootstrap styling. The application is now ready to test. Start your server as usual and have a look with your browser. How do you think it looks? Feel free to experiment with adjustments to the styling.

Once it’s all working, don’t forget to push your work to github. Then issue a pull request.

Setup

Adding Bootstrap

Styling with bootstrap classes

Footer