This lesson is adapted from
https://www.digitalocean.com/community/tutorials/how-to-add-bootstrap-to-a-ruby-on-rails-application
by Kathleen Juell. It has been modified to remove dependencies on npm, webpacker, etc.
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.
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.
Do this command to create a controller:
bin/rails generate controller home index
Edit the config/routes.rb file. Change:
root 'sharks#index'
to
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 screensize. 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" %>Similarly, style the the buttons in app/views/sharks/edit.html.erb, so that they look like:
<%= link_to 'Show', @shark, :class => "btn btn-primary btn-sm" %> <%= 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.