CODEWITHSUNDEEP
ruby-on-rails
Dotol
Dotol

Reputation: 406

Bootstrap v4 Installing issues in Rails

Or they are? When I use inspect element on any bootstrap component it's taking CSS from application.css (not bootstrap itself). I'm pretty sure I did something wrong when installing even though I went through the guidelines a few times.

Forgot to add I'm using Rails 4.2.6 and using the gem from: https://github.com/twbs/bootstrap-rubygem#a-ruby-on-rails

This is what I mean, for example the btn classes are working but they do not point to Bootstrap in inspect element but rather to application.css. Also the navbar (copy paste from getbootstrap.com) works as far as javascript dropdowns go but CSS is off. enter image description here

Gemfile

#Bootstrap V4 Alpha
gem 'bootstrap', '~> 4.0.0.alpha6'
* sprockets-rails (3.2.0)

application.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 any plugin's vendor/assets/stylesheets directory 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.
 *
 */

 @import "bootstrap";

application.js

// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap

Upvotes: 0

Views: 87

Answers (2)

disc0ninja
disc0ninja

Reputation: 68

Look very closely at your application.css file's comments.

 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.

This is why it appears as though all the css is coming from the application.css, but you are importing the bootstrap css at the bottom of the file..

Upvotes: 0

Hizqeel
Hizqeel

Reputation: 947

In your application.js file place //= require bootstrap after //= require jquery so the file will be look like this:

// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Restart your rails server and the changing will take effect.

Upvotes: 2

Related Questions