Installing Bootstrap 3 on Rails App

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 and bootstrap-dist/css/bootstrap.min.css

    To: vendor/assets/stylesheets

  • Copy:

    bootstrap-dist/js/bootstrap.js and bootstrap-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.jsby 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



Leave a reply



Submit