CODEWITHSUNDEEP
htmlcssruby-on-railsbootstrap-4
Gerald Matthew Concepcion
Gerald Matthew Concepcion

Reputation: 71

Bootstrap not properly loading in Ruby on Rails app

How do I get Bootstrap 4 to load on my web app?

My Gemfile:

gem 'rails', '~> 5.1.5'
gem 'devise'
gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '>= 3.2'
gem 'coffee-script', '~> 2.4', '>= 2.4.1'
gem 'sqlite3'
gem 'puma', '~> 3.7'
gem 'autoprefixer-rails', '~> 8.1'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'sprockets-rails', '~> 3.2', '>= 3.2.1'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'

Application.html.erb:

<!DOCTYPE html>
<html>

<head>
  <title>Itonatalaga</title>
  <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
      <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#">Start Bootstrap</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-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="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <!-- Page Content -->
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center">
        <%= yield %>
      </div>
    </div>
    <!-- row -->
  </div>
  <!-- container -->
  <style>
    body {
      padding-top: 70px;
    }
  </style>
</body>

</html>

Screenshot of localhost:3000:

enter image description here

I encountered earlier problems with needing coffee-script-source to be able to avoid the Exec.js error. I then decided to install Node.js onto my machine, but then nothing happened. Bootstrap still doesn't load.

Upvotes: 0

Views: 533

Answers (2)

Tobias
Tobias

Reputation: 4663

Bootstrap 4 has a new Ruby gem. It's called bootstrap-rubygem. Follow the instructions in the repo README and you should be fine.

You have to take into account that Bootstrap 4 is not compatible with Bootstrap 3 code. If you have a larger code base you have to completely revise it.

Upvotes: 0

WebDevBooster
WebDevBooster

Reputation: 14964

Bootstrap 3 is totally incompatible with Bootstrap 4.

You can't expect Bootstrap 3 css to work with Bootstrap 4 syntax.

This: 

gem 'bootstrap-sass', '~> 3.3.7'

is Bootstrap 3.

You need 4.0.0 for your Bootstrap 4 HTML.

Upvotes: 1

Related Questions