Rails does not appear to have Bootstrap installed

Having trouble with Bootstrap integration, encountering the error message:

Sprockets::FileNotFound in Home#index
Showing /Users/user/Ruby/app/views/layouts/application.html.erb where line #5 raised:
couldn't find file 'twitter/bootstrap/responsive'
(in /Users/user/Ruby/app/assets/stylesheets/application.css:16)

Here's the traceback:

app/views/layouts/application.html.erb:5:in `_app_views_layouts_application_html_erb___1332549890933188692_2173263620'

This is the code I currently have for my stylesheet:

*
*= require twitter/bootstrap
*= require_self
*= require_tree .
*= require twitter/bootstrap/responsive
*/

As for the JavaScript file:

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

I've tried numerous tutorials and forum posts to no avail. Any advice would be greatly appreciated.

EDIT

My application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title>Dumpr</title>
  <%= 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-narrow">
  <div class="masthead">
    <%= render 'layouts/user_header' %>
    <h3 class="muted"><%= link_to "SimpleDevise", root_path %></h3>
    <h5 class="muted">A demo of using SimpleDB with Devise</h5>
  </div>
  <hr />
  <%= yield %>
</div>
</body>
</html>

Answer №1

To implement Twitter Bootstrap in your project, follow these steps:

gem "less-rails", '2.2.6'
gem "twitter-bootstrap-rails", '2.2.6'

If you are using Less, run the following command:

rails generate bootstrap:install less

If you don't need to customize stylesheets with Less, add this line to your Gemfile:

gem "twitter-bootstrap-rails", '2.2.6'

Then run the command:

rails generate bootstrap:install static

Lastly, remove the following lines from your CSS file:

*= require twitter/bootstrap
*= require twitter/bootstrap/responsive

For more detailed instructions, visit the bootstrap wiki

Answer №2

If you're looking to enhance your web design, consider integrating bootstrap with the help of the bootstrap-sass gem.

Access the gem here: https://github.com/twbs/bootstrap-sass

  • Personally vouch for its effectiveness after using it extensively

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

Top method for extracting mesh vertices in three.js

Being new to Three.js, I may not be approaching this in the most optimal way, I start by creating geometry like this: const geometry = new THREE.PlaneBufferGeometry(10,0); Next, I apply a rotation: geometry.applyMatrix( new THREE.Matrix4().makeRotation ...

Combine the values of properties in an object

I have a JavaScript object that contains various properties with string values. I want to concatenate all the property values. Here's an example: tagsArray["1"] = "one"; tagsArray["2"] = "two"; tagsArray["Z"] = "zed"; result = "one,two,zed" To prov ...

Trigger an alert using the Ajax response

Is there a way to display the value of imageX outside of the $.ajax() function? var imageX; $.ajax({ type: 'GET', url: 'php/my1.php', dataType: 'json', async: 'false', success: function(response) ...

All web resources need to be included in the web_accessible_resources manifest key

I'm encountering an issue with my Angular app. The error message on the client console reads: Denying load of chrome-extension://fiekimdgbphfmnlbiahcfdgcipcopmep/js/lib/angular/angular.min.js.map. Resources must be listed in the web_accessible_resour ...

Is there a method I can use to transform this PHP script so that I can incorporate it in .JS with Ajax?

I have a JavaScript file hosted on domain1.com, but in order for it to function properly, I need to include some PHP code at the beginning. This is necessary to bypass certain restrictions on Safari for my script by creating a session. The PHP code establi ...

Creating a Form with Dynamic HTML when Button is Clicked

I have been working on enhancing the functionality of my website app located at , but unfortunately, I have not been successful so far. My goal is to introduce a vendor information form with just one click of a button and then enable users to add products ...

Tips on creating a script for detecting changes in the table element's rows and columns with the specified data values

I have a div-based drop-down with its value stored in TD[data-value]. I am looking to write a script that will trigger when the TD data-value changes. Here is the format of the TD: <td data-value="some-id"> <div class="dropdown">some elements& ...

How can I load a specific div region using ajax for submitting a form?

I'm not sure if my approach is correct. On my main page, I have some information displayed. When you click a button, the form will load from a separate file: $('#viewport').load('/views/myView.php #targetDiv') This works fine ...

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

Provide props to vue-router along with boostrap-vue's b-nav-item

I am currently in the process of transitioning my SPA from modals that load components to routed pages that load components. I have been able to successfully open a page using to="/fixtures" in the html, but I am facing an issue with passing in a component ...

Issue with triggering function within Material UI Tabs

The issue I encountered cannot be replicated, but I attempted to address it. Within a Material UI element, there is a child element that I inserted - an X icon located in the corner. The parent element is the surrounding box. There are two main problems: ...

Configuring webpack for live reloading and Hot Module Replacement on static pages

The title of this post may not be very clear, but I appreciate your patience. I am currently in the process of setting up React for an older Rails application that uses static ERBs. Due to the size of the project, I am gradually transitioning towards a Si ...

What are some ways to ensure my web application appears correctly on Internet Explorer versions 8 and 9?

When I compare how my application looks in IE versus Chrome and Firefox, it seems like there are styling issues. I want to address this problem. I attempted to use the IE developer tool but couldn't find any options to customize styles and CSS. How d ...

Arranging an Array Object in Javascript by Date

Although similar questions have been addressed in other posts, my specific situation appears to be unique due to the data I am receiving from Twitter. Here is the logic I am currently using to sort the JavaScript Array object. However, the issue seems to ...

Not implementing auto-scroll feature because of the presence of `position: sticky` or `position: fixed` CSS properties

I'm encountering a console warning while working on my Nextjs project. Here is the snippet of my code: <aside className={`site-off desktop-hide ${showMenu ? "show-menu" : ""}`}> .... </aside> And here is the relevant ...

When transmitting a variable from JavaScript to PHP using Ajax, the data appears to be missing

While attempting to pass a simple string variable using an onclick event, I encountered an issue where the request was successful but the response in the console displayed as empty. Additionally, the xvar variable did not come through properly resulting in ...

Having difficulties achieving successful API requests in Next.js and Snipcart

I'm currently diving into the world of Snipcart, and I'm encountering some issues connecting to your API. I'm using Next.js and haven't been able to find any solutions on the forum or in the documentation that address my specific proble ...

The v-bind class feature is failing to update the CSS on the object's properties

I'm attempting to dynamically modify the CSS of certain buttons based on object properties within a list. Below is the data I am rendering out, and despite following the documentation and ensuring my setup is correct, I seem to be overlooking somethin ...

When trying to submit a form, encountering an `Uncaught ReferenceError` due to calling ajax within

Attempting to trigger an ajax function within a form in order to retrieve a value for the dropdown. mypython.py @app.route('/new_data', methods = ['POST', 'GET']) def new_data(): #Filter data and return the data(data_lis ...

The CSS Bootstrap 4 class 'input-group-append' is not functioning properly. Just recently, the styles were displaying correctly

My web application using AngularJS 1.7.8, jQuery 3.3.1, Bootstrap 4.3.1, and various other CSS and JS libraries worked seamlessly last week. However, today I noticed an issue with the button visualization. To Replicate: Visit openskymap.org to see my d ...