Question posted in
The official documentation can be found here.

Redis – Rails Bootstrap Navbar Display Issue

just getting started with a Rails 5 side project. Having some issues getting an out of the box Navbar showing correctly.

It’s all squished up, as per the screenshot attached. Any thoughts?

I’ve attached the relevant code below.

Thanks in advance!

  1. application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <%= stylesheet_link_tag    "application", media: "all" %>
    <%= javascript_include_tag "application" %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
  </head>
  <body>
    <%= render 'layouts/navigation' %>
    <%= yield %>
    </br></br>
    <%= render 'layouts/footer' %>

  </body>
</html>
  1. navigation – Navbar
<div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <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="#">Link</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>
  1. Gemfile
source 'https://rubygems.org'


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.0.0'
gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap_form'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'

# Use Puma as the app server
gem 'puma', '~> 3.0'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
gem 'devise'

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

group :development, :test do
  gem 'sqlite3', '~> 1.3.6'
  gem 'byebug',  '11.1.3', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console'
  gem 'listen', '~> 3.0.5'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

group :production do
  gem 'pg', '1.2.3'
end
  1. 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, 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 other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 */
 
@import "bootstrap-sprockets";
@import "bootstrap";
Tags:

2

Answers


  1. 0

    As indicated in doc Bootstrap Javascript depends on jquery, it’s installed via your Gemfile but you should add Bootstrap dependencies and Bootstrap to your application.js:

    //= require jquery3
//= require popper
//= require bootstrap
    Login or Signup to reply.
  2. 0

    In you gem file your have included multiple bootstrap related gem, i.e

    gem 'bootstrap-sass', '~> 3.3.6'
gem 'bootstrap_form'
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'

    i am not sure if all are needed but to implement bootstrap in rails 5 following this method is sufficient.

    This is my rails 5 project’s bootstrap setup

    in Gemfile

    gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'

    some version of bootstrap gave me problem, this works fine for me, please check if its same for you

    in application.js include jquery popper and bootstrap on top, like this.

    //= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require activestorage
//= require turbolinks
//= require_tree .

    in application.scss
    only do

    @import "bootstrap";

    do rails assets:precompile and restart rails server to be sure.

    and the bootstrap should work fine, at least it works for me, and i hope it helps you some.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search