Moe Moe - 3 years ago 152
Ruby Question

Bootstrap NavBar deployed in rails app looks broken

I'm trying to build my first rails web app, and I'm stuck at the point where I needed to embed Bootstrap code of a navigation bar into my application
I started with a NavBar(code below). It appeared in my home page, but it looked broken. I'll attach the picture with this question. Thanks for your help!

In the ~/views/layouts/application.html.erb file:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>


In ~/application.css.scss file:

@import "bootstrap-sprockets";
@import "bootstrap";


In gemfile:

gem 'bootstrap-sass', '3.3.6'
gem 'sass-rails', ' 3.2'


In ~/application.js:

//= require jquery
//= require bootstrap-sprockets


Then I ran the command bundle install, and I got this ugly output:

Bundler could not find compatible versions for gem "sass":
In Gemfile:
bootstrap-sass (= 3.3.6) was resolved to 3.3.6, which depends on
sass (>= 3.3.4)

sass-rails (= 3.2) was resolved to 3.2.0, which depends on
sass (~> 3.1.10)


I tried with the very limited knowledge I have in development to solve it but I couldn't. I'm learning Ruby on Rails on Cloud9 platform.
could anyone please help? Thank you in advance.

Moe

Gemfile:

source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '5.1.4'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', group: [:development, :test]
#Use Bootstrap library for styling.

#Use postgresql as the db for production
group :production do
gem 'pg'
gem 'rails_12factor'
end
# Use SCSS for stylesheets


# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
gem 'bootstrap-sass', '~> 3.2.0'
gem 'sass-rails', '~> 5.0'
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '0.4.0', group: :doc

# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring', group: :development

# Use ActiveModel has_secure_password
# gem 'bcrypt', '3.1.7'

# Use unicorn as the app server
# gem 'unicorn'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

# Use debugger# gem 'debugger', group: [:development, :test]

Answer Source

You have a bunch of places where you're specifying specific versions of gems. Like:

gem 'uglifier', '1.3.0'
gem 'coffee-rails', '4.0.0'
gem 'jbuilder', '2.0'

Those should be more like:

gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'

And so on. The naming of specific versions is what's causing your gem compatibility problems.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download