3

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
Abdull Rehman
  • 31
  • 3
  • Can you successfully `bundle install`? – Sara Fuerst May 24 '18 at 20:01
  • 1
    Try to add cdn link in head section of application.html.erb surely it will work – Sagar Pednekar May 24 '18 at 20:03
  • 2
    you need to provide the exact error you're facing. Also, using linux instead of windows might help – Vedant Agarwala May 24 '18 at 20:09
  • What are you trying to do that doesn't work? Can you show a minimal example of the view code you're trying to use? What happens if you try using bootstrap in a fresh rails app, can you get it to work there? – Simple Lime May 25 '18 at 12:11
  • Could you provide more details? What makes you believe that Bootstrap didn't install correctly? – Petercopter May 25 '18 at 21:54
  • Please tell us, what you mean by not working... otherwise it is hard to help you. Does the stylesheet not compile, is the css not included in your layouts? I think you must misunderstand something somewhere. If you use cdn and just put it at the top of your layout template, then bootstrap will be included. What does not work then? What do you expect? – Roland Studer May 28 '18 at 10:37

3 Answers3

2

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

Horacio
  • 1,794
  • 1
  • 16
  • 23
  • It didn't work, Do you have any ideas what is wrong with my app? I have exactly done what you said in your answer – Abdull Rehman May 25 '18 at 08:58
  • 1
    I just created a GitHub repo. I can confirm is working with bootstrap. However, I'm using a mac, so not sure if there is something missing for Windows. https://github.com/HoracioChavez/bootstrap-sample – Horacio May 25 '18 at 13:19
1

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.

ruby_dev
  • 136
  • 12
0

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.

mello
  • 21
  • 2
  • 5