BS4Themes Blog

Get the latest Bootstrap 4 news, insights and helpful tips here.

New Themes - Flatro & Glowworm!

Glow Worm

Two new free themes from BS4Themes. Check them out now!





Bootstrap 4 Rails Quickstart Guide

Sample Application

Today we'll show you how to quickly set up a barebones Rails application with Bootstrap 4.

This tutorial assumes you have a basic understanding of Ruby on Rails and will only cover the barebones of installing Bootstrap 4 into your asset pipeline. It will not actually set up any models or backend structure, that is up to you/possible future post :)


Install Rails

Setup a fresh application

Let's get right into it by setting up a sample application. From the console, let's run rails new DemoApp and then change directory into that folder for our next step.

Adding controller and views

From /DemoApp in console, let's add a controller and some quick routes to show some content: rails g controller Demo home will get us up and running with a basic views.

Setting up routes

Let's modify our root so it points to our "Home" view, by editing the config/routes.rb file:

# config/routes.rb
Rails.application.routes.draw do
  root 'demo#home'  
  get 'demo/home'
end

At this point, we've got a basic view and route, but blank page. Here's what our landing looks like

nothing fancy bootstrap 4 setup view



Installing bootstrap 4

Download the source zip

Head over to the Bootstrap 4 Downloads page and grab the latest alpha source .zip file.

Add files to Asset Pipeline

Stylesheets

Inside your app's /vendor/assets/stylesheets/ directory, create a new folder bootstrap-4 and copy all the contents of the "SCSS" folder of the alpha source unzipped folder.

Next, inside your application.css file, add a require for that file *= require bootstrap-4/bootstrap in between the tree and self.

Boom! All the styles are in place! Let's add some Javascript!

Javascript

We're basically going to do the same thing we did for stylesheets, so start by creating a bootstrap-4 folder inside /vendor/assets/javascripts, then adding bootstrap.js into it and adding it to the manifest. Inside application.js, add //= require bootstrap-4/bootstrap just before the final require_tree . and you're good there.

However... we have an issue...

If you were to load the view at this point, you would still see the same plain view as before (although with a new font/line-height thanks to bootstrap's CSS in place), BUT inspecting the console (cmd option + i) would still show you the following error

Even though that really doesn't affect what we're building here, that's still not good, so let's fix it! Head over to the Tether.js home page and download the latest zip. Create another new folder and move the main javascript file into /vendor/assets/javascripts/tether/tether.js. Back to your application.js file, add another require for Tether BEFORE Bootstrap loads. Your file should look like


//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require tether/tether
//= require bootstrap-4/bootstrap
//= require_tree .

Now if you reload the main page, you should be error free. Plus, if you actually wanted to use Bootstrap 4 Tooltips or something you'd be all set ahead of time. 

Hopefully this helped get you started with installing Bootstrap 4 into your Rails Application, please let me know if we missed anything in the comments below!

Welcome to BS4Themes!






So glad to have you here!

This site is pretty new, but we've got lots in store. Stay tuned for lots of cool new things on the way, including but not limited to:

  • Regular theme updates
  • Community themes/voting
  • Premium *templates* and pre-build Rails applications to jumpstart your next project or business.

We'll be updating content regularly, so please check back and let us know what you think we can do to improve the site. 

In the meantime, here are some of our favorite references for getting up and running with Bootstrap 4 quickly.