CODEWITHSUNDEEP
ruby-on-railsrubytwitter-bootstrap
Moe
Moe

Reputation: 23

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]

Upvotes: 1

Views: 249

Answers (3)

Moe
Moe

Reputation: 23

Thanks all, I highly appreciate the time and effort you gave me. So, I came to work today, and the problem that I got stuck on for almost 5 hours was fixed today in 10 minutes! I'm not sure what exactly fixed it, but I used the input from you guys, and I did the following:

1- I 'ctrl+x'ed all the contents of the Gemfile, saved it, and ran:

bundle install

Then I pasted the contents back, and I ran the bundle install again. I got this error:

Could not find gem 'sass-rails (~> 3.5.1)' in any of the gem sources listed in your Gemfile.

2- I ran the following command:

gem install rails

3- 

gem install railties

4- I added gem 'railties', '4.1.0' to the Gemfile.

5- Then bundle install and it accepted the command. At some point, the gemfile.lock came was created(I deleted it before, when I was trying to fix he issue).

As you can see, I didn't know what I was doing and I don't know what fixed the issue, but now it's working and I can see bootstrap elements on my webpage. Thank you Moe

Upvotes: 0

jvillian
jvillian

Reputation: 20263

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.

Upvotes: 1

Helder Robalo
Helder Robalo

Reputation: 1847

@moe If you google for Bundler could not find compatible versions for gem "sass": the first result may answer your question: Bundler could not find compatible versions for gem "sass"

Bottom line, you're locking the gems version, try this and be happy:

gem 'bootstrap-sass', '3.3.6' gem 'sass-rails', '~> 3.2' And here is the reference for that ~> What does ~> mean in a gem file

Upvotes: 0

Related Questions