CODEWITHSUNDEEP
ruby-on-railstwitter-bootstrapsass
ishan
ishan

Reputation: 73

bootstrap not working in ruby on rails: navbar not displayed

I am trying to load the gem from bootstrap and display a navbar on my page but it doesn't seem to work.

gemfile code

source 'https://rubygems.org'

gem 'rails', '4.2.4'
gem 'sqlite3'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> 2.0'
gem 'bootstrap-sass'


group :doc do
    gem 'sdoc', require: false
end

gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

application.css.scss

@import 'bootstrap';

application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Etsydemo</title>
  <%= stylesheet_link_tag    'default', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'default', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
</head>
<body>

<%= render 'shared/navbar' %>
<div class= "container">
<%= yield %>

<%= render 'layouts/footer' %>
</div>
</body>
</html>

_navbar.html.erb

<nav class="navbar navbar-default navbar-fixed-top">

Toggle navigation Etsydemo 

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
  <ul class="nav navbar-nav">
    <li><a href="/pages/Contact">Contact</a></li>
    <li><a href="/pages/about">About</a></li>
    </li>
  </ul>
</div><!-- /.navbar-collapse -->

application.js 

//= require jquery_ujs
//= require bootstrap
//= require jquery
//= require turbolinks
//= require_tree .

Upvotes: 2

Views: 4647

Answers (2)

Ollie H-M
Ollie H-M

Reputation: 495

I think you need to import bootstrap sprockets as well as bootstrap. So the top of your application.scss file should have:

@import 'bootstrap-sprockets';
@import 'bootstrap';

Upvotes: 2

William Holt
William Holt

Reputation: 569

Try reorganizing your application.js (assuming you have the bootstrap.js loaded into the asset pipeline...if you have the minified version it would be bootstrap.min)

//= require jquery_ujs
//= require jquery
//= require turbolinks
//= require bootstrap
//= require_tree .

Upvotes: 1

Related Questions