Implementing the Initial Homepage Design in Rails 5 with Bootstrap 4
This guide will examine how to install a Bootstrap 4 template into a Rails 5 application. Specifically, we'll analyze how to properly integrate the HTML and CSS files so that Rails will render them properly on the site.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license
APPLY NOWLEARN MORE

Now that we have all of our styles planned out, we can start implementing the code that is going to transfer them from being just plain HTML and CSS into something in our Rails app.

In the last video, we downloaded the Bootstrap source code which contained our template website. I'll open the "Cover" template (under docs/examples), so that we make sure what we're building matches our reference.

To get this into our application, I'll start by opening the template's code in Sublime.

We'll get started by making sure we have the appropriate components in our application layout file, which is application.html.erb. We need to bring the UTF-8 and viewport components (see below) from the template into our own file. We can skip the Bootstrap call, because we've already installed it via the Ruby gem, and we'll deal with the custom styles in a minute.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Moving to the body tag, we can disregard the Javascript at the end of the template's HTML file, and focus on what remains. We'll replace everything in file home.html.erb with <div class="site-wrapper"> from the template code, along with everything else contained in that tag.

Now we'll come back to our styles. Copy everything in the template's cover.css file, and append it to the file application.scss. Don't erase @import "bootstrap";, because we still need that.

Save all files, and start the Rails server with rails s. If we navigate to localhost:3000 in a web browser, we should see that the page is beginning to come together.

large

In a future guide, we'll organize our code and clean up the design elements on the page.

Finishing up, I'll update my repository with git add ., git commit -m "[commit note]", and then git push origin design. Be sure to include a note of your choosing when you commit to your own repository.

Resources