Add Bootstrap

Goals

You know that every successful web site on the Internet has to look good, right? Let's add a little polish to our application.

We can use Twitter Bootstrap to do that. Bootstrap is a front-end framework that gives you a fast and easy way to make your application look good.

Steps

Step 1: Add Bootstrap gem to Gemfile
Bootstrap comes packed in a few variations (gems), but they all basically do the same thing - make your app look pretty.

Open your Gemfile and add the bootstrap-sass gem just below the gem 'rails' line, like so:
gem 'bootstrap-sass'
After you add that line to your Gemfile, install the bundle.
Type this in the terminal:
bundle install
The Rails server that you've been running in your terminal for a while doesn't know about the new gem you just installed. You need to restart the server.

Find the terminal running Rails (it will have a lot of messages like Started GET "/assets/application.js") and type Control+C.
Expected result:
^C[2022-03-31 08:33:11] INFO  going to shutdown ...
[2022-03-31 08:33:11] INFO  WEBrick::HTTPServer#start done.
Exiting
Then start it again.
Type this in the terminal:
rails server
Step 2: Add Bootstrap's Javascript files
Open the file app/assets/javascripts/application.js in your text editor.

Add the following line to it:
//= require bootstrap
This is how it should look after you are done with it:
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require_tree .
Do not worry if your file looks a bit different, it is just important that the file contains all of these lines.

This adds the Bootstrap Javascript files to be loaded by the app so we can have a smooth working interface. Javascript controls the behaviour of a page.
Step 3: Add Bootstrap's CSS files
Type this in the terminal:
touch app/assets/stylesheets/bootstrap_and_overrides.css.scss
This command will create the file at that path.

Open this file via your text editor and add the following lines inside:
@import "bootstrap";
body { padding-top: 60px; }
@import "bootstrap-responsive";
This added the CSS (Cascading Stylesheets) to the app. CSS is used to control the look of a page.
Step 4: Change the application layout
Our application layout is located at app/views/layouts/application.html.erb. This is used application wide, which means that every page of the app will have the same look and feel. Now, we'll need to change it so that our application uses the Bootstrap styles.

Open your app/views/layouts/application.html.erb file in your text editor and delete all the contents of the file.

Copy all of this code and paste it into the file:
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "Rails Bootstrap" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Suggestotron" %>">
    <%= stylesheet_link_tag "application", :media => "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <header class="navbar navbar-fixed-top">
    <nav class="navbar-inner">
      <h4>Suggestotron</h4>
    </header>
    <main role="main">
      <div class="container">
        <div class="content">
           <div class="row">
            <div class="span12">
              <% flash.each do |name, msg| %>
                <% if msg.is_a?(String) %>
                  <div class="alert alert-<%= name == :notice ? "success" : "error" %>">
                    <a class="close" data-dismiss="alert">×</a>
                    <%= content_tag :div, msg, :id => "flash_#{name}" %>
                  </div>
                <% end %>
              <% end %>
              <%= yield %>
            </div>
          </div>
        </div>
      </div>
    </main>
  </body>
</html>
Save the file. Now, you can view your app in the browser, test it out and you'll easily notice the changes in the look.

Also, if you are interested in learning more about HTML, CSS and JavaScript you can check out the FrontEnd Course.

Other Pages

Add Bootstrap

Goals

Steps

Step 1: Add Bootstrap gem to Gemfile

Step 2: Add Bootstrap's Javascript files

Step 3: Add Bootstrap's CSS files

Step 4: Change the application layout