Installing Bootstrap 3 on Rails App
Actually you don't need gem for this, here is the step to install Bootstrap 3 in RoR
Download Bootstrap
Copy:
bootstrap-dist/css/bootstrap.css
andbootstrap-dist/css/bootstrap.min.css
To:
vendor/assets/stylesheets
Copy:
bootstrap-dist/js/bootstrap.js
andbootstrap-dist/js/bootstrap.min.js
To:
vendor/assets/javascripts
Update:
app/assets/stylesheets/application.css
by adding:*= require bootstrap.min
Update:
app/assets/javascripts/application.js
by adding://= require bootstrap.min
With this you can update bootstrap any time you want, don't need to wait gem to be updated. Also with this approach assets pipeline will use minified versions in production.
What is the best way to install bootstrap with rails app?
Why install the bootstrap gem?
Since rails uses the asset pipeline to minify and compress stylesheets, javascripts, and images, using a sass version of bootstrap is the preferred way of including bootstrap over simply including bootstrap in your application layout view. In addition, if you simply included bootstrap in a header file, that included file would have to be a compiled version of bootstrap (it would simply be a css file). However, since we'll include the sass version of bootstrap in your app, you'll have access to bootstrap's sass variables, mixins, and other sass-related awesomeness. You couldn't get that functionality by including a compiled asset in your application layout view. By importing sass in your application.scss file, rails will compile your bootstrap and assets on the fly and will allow you a lot more flexibility in the design of your apps.
Adding Bootstrap to your rails app
According to the bootstrap-sass gem, you need to add
'gem 'bootstrap-sass'
to your Gemfile and then run
bundle install
Next, you'll want to import the bootstrap stylesheets in your application css manifest file. However, by default, the manifest file is named:
app/assets/stylesheets/application.css
but you should rename it to use a .scss extension (or .sass extension) like so:
app/assets/stylesheets/application.scss
Now, remove everything in your application.scss file and add the following two lines:
@import "bootstrap-sprockets";
@import "bootstrap";
You'll need to manually handle the imports of your scss files from now on.
Next, to make bootstrap's javascript helpers available, you'll need to add this line:
//= require bootstrap-sprockets
to your
app/assets/javascripts/application.js
You'll want to add that line is such a way that your application.js file looks like this:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
How to install jQuery and bootstrap in rails 7 app using esbuild (without webpacker)
Here is a clean solution, based on this bootstrap tutorial. I used the same principle to add jquery. Sprockets is used for css files, and importmaps for js. Webpacker, node, yarn, etc. are not needed.
In Gemfile
:
gem "jquery-rails"
gem "bootstrap"
gem "sassc-rails"
In app/assets/stylesheets/application.scss
(note that the file suffix should be .scss
, not .css
; change the suffix if needed):
@import "bootstrap";
In config/initializers/assets.rb
:
Rails.application.config.assets.precompile += %w( jquery.min.js jquery_ujs.js bootstrap.min.js popper.js )
In config/importmap.rb
:
pin "jquery", to: "jquery.min.js", preload: true
pin "jquery_ujs", to: "jquery_ujs.js", preload: true
pin "popper", to: "popper.js", preload: true
pin "bootstrap", to: "bootstrap.min.js", preload: true
In app/javascript/application.js
:
import "jquery"
import "jquery_ujs"
import "popper"
import "bootstrap"
Install the gems, clobber the old assets, restart the server, and it should work.
Rails: Install and configure bootstrap on rails 6
you need change
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
to
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
How do I install bootstrap js?
From the docs:
Require Bootstrap Javascripts in app/assets/javascripts/application.js
So in application.js
add:
//= require jquery
//= require bootstrap-sprockets
Also, don't forget to restart the server after bundle install
.
How do I use bootstrap for my rails application?
Hi I will try to share what I have on my current rails application on Windows:
First of all, I am not sure why you had to use that TOUCH command I don't remember using it in my app. I will try to show you what some of my important file contain, so you can guide yourself and try to find a way to solve this.
#Gemfile
gem 'bootstrap-sass', '~> 3.3.1.0'
#app/stylesheets/application.css.scss
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require 'masonry/transitions'
*= require 'masonry/infinitescroll'
*= require_tree .
*= require social-share-button
*= require jquery.tagsinput
*= require jquery.minicolors
*= require font-awesome
*= require_self
*/
@import "bootstrap-sprockets";
@import "bootstrap";
#.../layout/application.html.haml
#this goes right below %head
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
#app/javascripts/application.js
//= require bootstrap-sprockets
Related Topics
What Does a Double * (Splat) Operator Do
Can't Install Rmagick 2.13.1. Can't Find Magickwand.H.
What Does @@Variable Mean in Ruby
Rails Has_Many :Through Find by Extra Attributes in Join Model
How to Implement an Abstract Class in Ruby
How to Have Ruby Logger Log Output to Stdout as Well as File
How to Run a Rake Task from Capistrano
Create Two-Dimensional Arrays and Access Sub-Arrays in Ruby
How to Check If a Url Is Valid
Understanding Ruby'S Load Paths
You Have Already Activated X, But Your Gemfile Requires Y
Is It Good Style to Explicitly Return in Ruby
Saving Enum from Select in Rails 4.1