Question posted in
The official documentation can be found here.

Redis – Bootstrap navbar not appearing for Ruby on Rails

I have a ruby on rails application. in the meetings.scss, i have already done

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

in my gem file i have already bundled installed the below:

gem 'jbuilder', '~> 2.7'
gem "simple_calendar", "~> 2.0"
gem 'bootstrap-sass', '~> 3.3.6' 
gem 'bootstrap', '~> 4.5.0'
gem 'jquery-rails'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false

However, in my index.html.erb, I tried to do

<p id="notice"><%= notice %></p>
<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<h1>Meetings</h1>

But nothing is happening in the nav barenter image description here

In app/javascript/packs, my application.js looks like this

enter image description here

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

Any reason why?

Tags:

2

Answers


  1. 0

    If you are using Rails 5

    Rename your app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss then put:

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

    Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use @import to import Sass files.

    Require Bootstrap Javascripts in app/assets/javascripts/application.js:

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

    Source: https://github.com/twbs/bootstrap-sass

    If you Rails 6 with Webpack you can follow these steps:

    https://medium.com/@guilhermepejon/how-to-install-bootstrap-4-3-in-a-rails-6-app-using-webpack-9eae7a6e2832

    Login or Signup to reply.
  2. 0

    The preferred way to install Bootstrap (or any assets for that matter) in Rails 6 is with yarn. Here are the steps to get it to work:

    1. In your terminal

    yarn add bootstrap query popper.js

    2. In config/webpack/environment.js

    const webpack = require(‘webpack’)
environment.plugins.append(‘Provide’, new webpack.ProvidePlugin({
  $: ‘jquery’,
  jquery: ‘jQuery’,
  Popper: [‘popper.js’, ‘default’]
})

    3. app/javascript/packs/application.js

    require(‘bootstrap/dist/js/bootstrap’)

    4. app/assets/stylesheets/application.css

    @import bootstrap/scss/bootstrap

    5. app/assets/stylesheets/application.css

    change to app/assets/stylesheets/application.scss
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search