Issues with implementing Bootstrap 4 navbar on a Rails 5 application

I'm currently in the process of transitioning my static HTML/CSS/JS website to a Rails application. Using Bootstrap 4, I had all the functionality and CSS classes working perfectly on the static site. However, after the migration to the Ruby app, the navbar is no longer visible.

Could it be that I forgot to include a specific gem file? Or perhaps I am embedding the style tags incorrectly?

Here is a snippet from my gem file:

gem 'rails', '~> 5.0.5'
gem 'sqlite3'
gem 'puma', '~> 3.0'
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.2'
gem 'bootstrap', '~> 4.0.0.beta'
gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.2'
gem "autoprefixer-rails"
gem 'jquery-rails'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
<!-- Code trimmed for brevity -->

Below are the JavaScript requirements:

//= require jquery
//= require bootstrap
//= require jquery_ujs
//= require turbolinks
//= require_tree .

My custom CSS looks like this:

.navbar-custom {
  border-radius: 0px;
  z-index: 16;
  box-shadow: 0 2px 3px 0 rgba(0,0,0, .4);
}

For my application.html.erb, the head section includes:

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

And this is how the navigation bar is implemented within application.html.erb:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-custom">
  <div class="container-fluid d-inline-flex">
    <!-- Navigation bar content trimmed for brevity -->

Answer №1

After encountering the same issue, I discovered that it was resolved by making a simple change:

<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-custom">

became

<nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-custom">

It's possible that you're referencing documentation for a different version. You can find the documentation for version 4.0.0beta at https://getbootstrap.com/docs/4.0/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The error message `Capybara Selenium click_link` indicates an issue with the method `start_with?` being called on a nil object

Currently, I am utilizing Capybara 2.1.0 and Selenium-Webkit 2.38.0 gems to run tests on a Rails 3.2.13 application. Here is the test script that I'm facing an issue with: visit my_favorite_path click_link_or_button 'Share' page.should hav ...

Error encountered while trying to import a bootstrap file into a component

I am facing an issue in my Angular project where I have locally downloaded Bootstrap and trying to reference the _variables.scss file inside a component. However, whenever I import it into the component, I encounter a compile error. Is there a mistake in m ...

What could be causing the submit button on this form to not be centered by this CSS?

I have been attempting to center this submit button using CSS, however, despite researching various online resources, I have not yet discovered a solution. It seems strange that such a simple task is proving to be so challenging. td.class > div { w ...

Issue with calling a function to change the CSS color class of a button in Angular

Within my Angular code, I am attempting to set a CSS color for my button by calling a TypeScript function that will return the appropriate CSS class name. This is the code I have tried: <button style="height: 10%" class="getColor(days.date)">{{days ...

Cutting imagery to create a new design element

https://i.sstatic.net/IAh0h.jpg There is an image above with 6 gears (circles with pointy edges). My goal is to separate them into individual pictures and, on each picture's hover, have a relevant line with text appear. How can I achieve this? The a ...

Having trouble with the functionality of Bootstrap 5 carousel?

I've been attempting to integrate this carousel into my Bootstrap 5 webpage. I found it on Codepen - https://codepen.io/sahil-verma/pen/wxXryx Thus far, I've copied the code into my webpage and linked the corresponding CSS within style tags, sim ...

Limit Content to be contained within a Bootstrap Container/Div

How can I shrink the content inside a container without distorting images? When the screen size decreases, all the images and content inside start to lose their alignment and sizes begin to change. I am aware that this may make the content harder to see. ...

The total height of an HTML element, which takes into account the margin of the element itself

Is there a way to accurately calculate the height of an element including margins, even when dealing with child elements that have larger margins than their parents? HTMLElement.offsetHeight provides the height excluding margin, while this function from ...

expanding menu options in a dynamic design

My webpage features a logo alongside a menu: Here's the HTML code: <div id="logomenuwrapper"> <div id="logo"><img src="img/logo_light.jpg"/></div> <div id="menu"> <ul> <li><a href="#">About ...

What could be the reason behind Google and Bing's mobile-friendly tests inaccurately flagging my site as non-mobile friendly?

Our website for resources is responsive and has been thoroughly tested on various real smartphones, including iPhone, Android, and Windows devices. It looks great on every phone we've tested it on. You can visit the resources website here: The site ...

Troubleshooting issues with Bootstrap 4 navbar dropdown functionality

I recently added a test page, but when clicking on the links, they do not direct you to the album page as intended. Instead, the page blinks and jumps quickly. To see this issue in action, visit the live test page through this link. <!DOCTYPE html>&l ...

Activating Jquery toggle on several elements instead of just the specified element

Hey everyone, I have a question regarding jQuery. I have a toggle function that is supposed to activate when clicking on a specific element - in this case, my logo image with the id of #logobutton. The toggle works great, but there's a problem. The an ...

What are some strategies for customizing the appearance of child components within a parent component?

I have a scenario where I am using parent and child components. When I use the HTML in another component, I also apply my CSS. For example, in my parent component: HTML <div class="chips"> <p class="tags">Tag 1</p&g ...

How can you ensure a line stays fixed to the bottom of a box regardless of the text size in SCSS and HTML?

I have a CSS rule that displays a line within a div only when the div is active. The specific SCSS class I am using is: .active-tab:after { content: ''; display: inline-block; height: 4px; width: 100px; right: -7px; background-color: ...

Permanently dismiss Bootstrap 4 alert using a cookie

Recently, I came across a bootstrap 4 alert that I found quite useful. Here is the code snippet for it: <div class="alert alert-warning alert-dismissible fade show" role="alert"> <button type="button" class="clo ...

The Page Transcends the Boundaries of the HTML Tag

This particular issue sets itself apart from the common overflow problems that are often faced by people. Interestingly, I have only encountered this problem while using Chrome (Version 41.0.2272.101 64-bit). IE 9+ and Firefox, on the other hand, seem to b ...

list without specific order spacing

I have implemented an unordered list in the footer section of my HTML document. Within this list, the first two items consist of social media logos displayed as images. To enhance their visibility and prominence within the footer, I have assigned them a wh ...

"Troubleshooting a dropdown navigation bar problem in CSS

I am currently working on creating a CSS navbar dropdown, but I am encountering some issues. I am not very experienced with CSS, so any assistance would be greatly appreciated. The text within the "Products" box is not changing color like it should, and yo ...

Tips for animating the box-shadow effect using jQuery

Can anyone provide insight on how to animate the box-shadow of multiple elements? I have reviewed previous threads such as this one, but found outdated and non-working solutions. Additionally, I came across the jquery box-animation plugin, which is limit ...

What is the best way to vertically center a column of images on mobile devices in a responsive manner?

Currently, I am developing an application that showcases the 9 newest photos with a specific tag. To ensure consistency in image sizes, I have set each photo to be 240px wide and 200px tall. My query now is how can I vertically center these images so they ...