Get the latest Bootstrap 4 news, insights and helpful tips here.
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 :)
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.
/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.
Let's modify our root so it points to our "Home" view, by editing the
# 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
Head over to the Bootstrap 4 Downloads page and grab the latest alpha source .zip file.
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.
We're basically going to do the same thing we did for stylesheets, so start by creating a
bootstrap-4 folder inside
bootstrap.js into it and adding it to the manifest. Inside
//= 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
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!
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:
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.