CODEWITHSUNDEEP
ruby-on-railsrubybootstrap-4bootstrap-sassruby-on-rails-5.2
Abdull Rehman
Abdull Rehman

Reputation: 31

I can't Integrate Bootstrap in my Ruby on Rails App

I have tried every tutorial and every guide but I am not able to integrate bootstrap in my rails app I have tried bootstrap-sass gem, bootstrap CDN, bootstrap gem

Ruby on Rails version 5.2.0 Ruby version 2.2.6

EXACTLY FOLLOWED THESE TUTORIALS AND HAVE ACHIEVED 0 RESULTS:

for bootstrap sass https://github.com/twbs/bootstrap-sass

for bootstrap https://github.com/twbs/bootstrap

tried using bootstrap CDN https://www.bootstrapcdn.com/

I have been stuck on this for weeks, tried solving it on my own, followed many blog posts and StackOverflow answers and tried everything. Is it a problem with rails 5.2 version? or my operating system windows 10 is there a gem missing in my gem file?

EDIT: I can run bundle install successfully, adding CDN in my head tag in application.html.erb does not solve my problem The problem I am facing is that I cant use bootstrap no matter what method I try

GEM FILE :

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.2.6'


gem 'rails', '~> 5.2.0'


gem 'sqlite3'


gem 'puma', '~> 3.11'


gem 'coffee-script-source', '1.8.0'


gem 'bootstrap-sass', '~> 3.3.7'


gem 'sass-rails', '~> 5.0'


gem 'jquery-rails'


gem 'uglifier', '>= 1.3.0'


gem 'duktape'


gem 'coffee-rails', '~> 4.2'


gem 'turbolinks', '~> 5'


gem 'jbuilder', '~> 2.5'


gem 'bootsnap', '>= 1.1.0', require: false

Upvotes: 3

Views: 2499

Answers (3)

mello
mello

Reputation: 31

for rails v5.2.0.

  1. All you need is to ensure you have the gem 'bootstrap-sass' AND gem 'jquery-rails' in the gem file. Bootstrap requires JQuery. Back in other rails versions i.e v4.x you would have to include alot of other gems but not anymore in this version they are the default except the bootstrap-sass and jquery-rails gem.
  2. run bundle install to install the gems
  3. Then change the default manifest file app/assets/stylesheets/application.css filename to app/assets/application.scss(.sass) because we need to import (load and execute) said file, css cant do that also because the line we intend to include is sass syntax not css syntax.
  4. include @import"bootstrap" in the stylesheet manifest file (application.scss) and prepend //= require jquery in application.js. This affects affects the app/views/layouts/application.html.erb the standard place for all your layout used by all templates in the controller. In older versions here you would have to require other extensions eg. turbolink in order for bootstrap to work effectively and efficiently but no in this version.

Your done. All your web pages are now bootstrap integrated.

Upvotes: 0

Horacio
Horacio

Reputation: 1964

Maybe try this one:

1) Gemfile

# Add these gems. Rails is not including jQuery by default.
# You need to include it to use all bootstrap options.
gem 'bootstrap'
gem 'jquery-rails'



2) app/assets/javascripts/application.js

jquery3, popper, and bootstrap are the ones for bootstrap

//= require jquery3
//= require popper
//= require bootstrap

//= require rails-ujs
//= require turbolinks
//= require_tree .



3) app/assets/stylesheets/application.scss

@import 'bootstrap'; // assuming you changed to SCSS from CSS


4) Run bundle and restart your server

This is a working repo with Rails 5.2 and Bootstrap 4 https://github.com/HoracioChavez/bootstrap-sample
Tested on macOS

Upvotes: 2

ruby_dev
ruby_dev

Reputation: 136

You can try this example. It works for me in my project.

In your Gemfile:

gem 'bootstrap-sass'
gem 'jquery-rails'

In your app/assets/javascripts/application.js

//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

In your /app/assets/stylesheets/application.scss

*= require_tree .
*= require_self
*/

@import "bootstrap-sprockets";
@import "bootstrap";

After you install all gems and make above configurations you can try to test your bootstrap work with this bootstrap dropdown button. Hope it helps you.

Also, please note, that I used bootstrap 3 and worked on Linux Ubuntu.

Upvotes: 1

Related Questions