How to use Bootstrap Themes on Ruby on Rails in 5 minutes
Ruby on Rails is extremely user-friendly and a totally manageable entry point into programming and web development. However, after learning rails for a couple of days, I’m getting tired of seeing plain context on a web page.
This is when I discovered Bootstrap. It allows you to insert component such as navbar, carousel, alert into a page instead of having to build them from scratch.
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. — Getbootstrap.com
In this tutorial, I will show you how to configure your Ruby on Rails files to get started with Bootstrap easily in a way that optimizes your web app’s performance. In this tutorial, I will be using the Start Bootstrap Grayscale theme.
- Create a new project called
grayscaleusing rails and navigate into the project folder
rails new grayscale
2. Open the project in a text editor and insert the following code into the header section of
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
You can read more about getting started with bootstrap here
3. Install Bootstrap and Jquery-rails gems
Add the following gems into your Gemfile:
Import Bootstrap styles in
We are using sass syntax
@import because it helps optimize the performance of your website by compiling the CSS into one file that is served to the browser.
CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use
@importin CSS it creates another HTTP request. Sass builds on top of the current CSS
@importbut instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.
— Sass Guide: Import
5. Add Bootstrap dependencies and Bootstrap to your
//= require jquery3
//= require bootstrap
bundle installor you can be extra lazy and just run
7. Open the live preview of Grayscale theme https://blackrockdigital.github.io/startbootstrap-grayscale/ and right click into
View Page Source
8. Create a controller and an index page in the terminal
rails generate controller grayscale index
9. Go to text editor and edit
Insert the following section of the code from step 7 accordingly
<!-- Bootstrap core CSS -->
<!-- Custom fonts for this template -->
<!-- Custom styles for this template -->
<!-- Navigation -->
<%= yield %>
<!-- Footer -->
<!-- Custom scripts for this template -->
app/views/layouts/application.html.erbwill be displayed across all pages.
Insert the all sections from
<!-- Header -->
<!-- Contact Section -->
11. Rename some routes
Since I didn’t download the image, vendor, css and js file locally, I will need to reroute some path in order for the page to display correctly.
Every time there is
img/, vender/, css/or
js/ , add
http://blackrockdigital.github.io/startbootstrap-grayscale/ in front of the path.
12. Finally, we can run
rails s to start the server and open http://localhost:3000/grayscale/index in the browser.
The result should look like this:
You can double check the final code in Github.
Thanks for reading!