Trouble getting Bootstrap to load in Rails with Sass

I'm a beginner in Rails and I'd like to incorporate Bootstrap into my website, but I'm running into issues with Bootstrap not loading. Can someone help me troubleshoot what might be wrong and suggest any changes I should make?

I've been following the instructions on this guide: Sass-Bootstrap

Below are the files I have:

Gemfile:

gem 'rails', '3.2.16'
gem 'ruby'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails', '>= 3.2'
gem 'turbolinks'

application.scss

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

application.js

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

application.html.erb

<meta name="viewport" content="width=device-width, initial-scale=1">
  <%= stylesheet_link_tag    "application", :media => "all", "data-turbolinks-track" => true %>
  <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
  <%= csrf_meta_tags %>
</head>
<body>
  <div class="container">
  <ul class="nav nav-tabs">
       <li><%= link_to "Home", welcome_index_path %></li>
       <li><%= link_to "About", welcome_about_path %></li>
  </ul>

<%= yield %>

</div>

The Ruby version used in my project is ruby 2.0.0p481 My Rails Version is: Rails 3.2.22

Answer №1

Bootstrap-sass is no longer compatible with Rails 3, The most recent version of bootstrap-sass that works with Rails 3.2 is v3.1.1.0.

Therefore, update it in your gemfile to

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

You can find more information at https://github.com/twbs/bootstrap-sass#a-ruby-on-rails

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

Trigger the animation with a button click by utilizing ng-class in Angular.js

How can I make an animation run more than once when a button is clicked? I've tried using ng-class but it's not working as expected. Any help would be appreciated. Thank you! <div ng-controller="MyCtrl"> <div class='contendor_port ...

Overlap of the X-axis domain line with the stroke of a d3 bar graph

When a bar is selected in my d3 bar chart, it should have a white border. Currently, the border is achieved using stroke, but the bottom border gets hidden under the x-axis line. // establish container size var margin = {top: 10, right: 10, bottom: 30, le ...

Switching the position of a div to absolute completely destroys the design of the layout

I currently have a bottom div at the footer of my webpage. It features a background image and another div called bottomnav, which contains an unordered list for navigation. However, when I try to change the position of bottomnav to absolute, the entire bo ...

Achieving Left and Right Alignment of Navigation Elements using Flex Basis in Chakra UI with Next JS

For my project, I am working on creating a straightforward Navigation bar using Chakra UI and Next JS. The goal is to have an svg logo positioned at the top-left, while the menu and UI buttons are aligned to the top-right. However, I'm facing challeng ...

Android not displaying images in React Native

When working with React Native for Android, I have utilized hdpi, mdpi, xhdpi, xxhdpi, and xxxhdpi in the assets folder. However, I've encountered a problem where some images display correctly while others get resized unexpectedly (changing in size) ...

Personalizing the collapse animation in bootstrap 4

When utilizing Bootstrap 4, the class .collapsing is used to animate the width/height of an .collapse-element while opening/closing it. However, the actual transition occurs by adding the width/height as an inline style to the element and toggling the clas ...

Showing subcategories when clicked using only JavaScript

The solution can be found below I have created a dropdown menu that currently shows the submenu on hover using the following CSS: .main-menu ul li:hover > ul { display: block; } However, my design requires the submenu to appear on click and stay visi ...

Issues with the JavaScript, HTML, and CSS Counter Implementation

Is there anyone who can assist me in making this code (available at https://jsfiddle.net/hmatrix/v3jncqac/) function properly? Purpose: My goal is to develop a counter that increments by specified values. My HTML: <body onload="incrementCount(10)"> ...

Error: Wordpress is unable to load styles due to a failed request for resources. The server returned a 404 status code, indicating that the requested file was not found

I'm currently in the process of transforming a static HTML website into a WordPress site. However, I've hit a roadblock right at the beginning while attempting to load all my styles from the css folder in my function.php. <?php // Loading st ...

In Firefox, the functionality of applying background-position-y to a label when it is immediately preceded by a checked input[type=radio]

CSS selector input[type=checkbox]:checked + label is not functioning properly in Firefox browser! label { display: block; font-family: 'Muli'; font-size: 14px; color: #666; vertical-align: top; background: url("https://s31.postimg. ...

When working with the <picture> element, only the first <source> is being utilized while the others are being disreg

When it comes to the img tag and the source tags, it simply switches between the first source tag based on the parameters provided. <picture> <source media="(min-width: 800px)" srcset="https://via.placeholder.com/800x700"> ...

Decrease the distance between hyperlinks

I understand that this question has been asked numerous times before, but as a beginner in HTML, I still require some assistance. Given the code provided below, how can I decrease the spacing between the links in each column? Code: a { color: white; ...

Customizing hover effects for select field options

I need help customizing the background color of a dropdown menu when hovered over. I attempted to assign a class "page-limit-option" to the option element, but it didn't work. Should I create a new style component instead of using the option? <sele ...

Unable to Toggle Bootstrap 5 Dropdown

Take a look at my code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewpor ...

Move the cursor over the text to reveal an image

Hello, I'm trying to replicate the same animation effect as seen on these websites: and . Specifically, when hovering over the "selected works" section, an image is displayed. I suspect it's using a JavaScript library, but I can't seem to i ...

Using JQuery and Bootstrap: Adding an image from a selection of images to a carousel

As a beginner in the world of JQuery, I am currently working on creating a customizable carousel where users can select pictures to add to the carousel with just one click. On the left side of the page, there is a selection of images to choose from, while ...

Tips for showcasing overflowing text in a menu list by rotating the item text

Imagine you have a TextMenuItem component, using MenuItem from the Material-UI library, that is part of a chain consisting of DropDownSearch > SimpleListMenu > FixedSizeList > TextMenuItem. In simple terms, this creates a searchable dropdown eleme ...

Struggling to make justifyContent function properly when using flexbox in conjunction with material ui

I need assistance with returning JSX to the title prop of a material-ui card component. My goal is to have two boxes displayed with space between them, one on the left side and one on the right side of the header. Using flex box, I am able to display the ...

Integrating a fresh element into the carousel structure will automatically generate a new row within Angular

I'm currently working on an Angular4 application that features a carousel displaying products, their names, and prices. At the moment, there are 6 products organized into two rows of 3 each. The carousel includes buttons to navigate left or right to d ...

Using CSS to create a triangular background within a <div> element

I am looking to create a CSS triangle shape for a background, but I am unsure of how to achieve this or if it is even possible. Ultimately, I want the menu to resemble the image linked below: While I have come across methods to create the desired shape, ...