Integrating Bootstrap with Rails 4

Today’s project was incorporating Bootstrap into my Rails application.

To start, I redid this basic Ruby on Rails tutorial on Tech Talent South’s website. To make it more personal, I decided to make a list of movies instead of a list of random members. I followed this guide by Koren Leslie Cohen on how to change column names in a database. It’s a great, simple guide, but I found that when I changed  the :name and :age into :title and :release, respectively, they didn’t change across all my views so I still had to go in manually and change them, which to me, beats the purpose of using the rails g migration command. Not sure if there is a better way to do it, as I am still new to Rails, but will keep searching.

To incorporate Bootstrap, I downloaded Bootstrap and followed along with the Readme file included in the download package.

This is what I added to my Gemfile:

gem 'sprockets-rails', '>=3.0.0.beta1'
gem 'sass-rails', '>=5.0.3'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'autoprefixer-rails'
gem 'bootstrap-sass', '~> 3.3.1'

In the guide, they recommended to add these two gems for SASS:
gem ‘bootstrap-sass’, ‘~> 3.3.4’
gem ‘sass-rails’, ‘>= 3.2’

But I kept getting errors when running ‘bundle install’ so I’m thinking these two gems are outdated. Could be because I had downloaded Bootstrap a couple months ago and my version of Bootstrap is older. So I had to go in and manually change the versions. This is where I found the latest version number for sass-rails.

If you come across the following error:

Bundler could not find compatible versions for gem "sprockets-rails"

Then you can go here to double check and see if your version of ‘sprockets-rails’ is compatible with your version of Ruby and Rails.

This is a great step-by-step guide on how to integrate Bootstrap 3.3 with Rails 4.2. After step 7, you can pick and choose what code you want to integrate into your site. Also refer to the CSS page on the Bootstrap home.

This is my final product: https://tts-sunsplat.c9.io/members (still a work in progress!)

Need to:
1. Add errors if no text in form fields.
2. Add movie descriptions to the ‘view’ page. (Maybe API?)
3. Add color.
4. Add images.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s