DEV Community

Gyowanny (Geo) Queiroz
Gyowanny (Geo) Queiroz

Posted on

Add custom CSS to Rails app with Bootstrap

Quick Rails tip for beginners

I'm using Rails 7 with Bootstrap 5. Here's a nice tutorial on how to generate a Rails 7 app with Bootstrap 5.

Say that you want to add custom CSS files in your Rails app. Here are the steps that worked for me:

  • Place your CSS file in app/assets/stylesheets folder
  • Reference the file in app/assets/stylesheets/application.bootstrap.scss

It should look like this:

//= link_tree ../images
//= link_tree ../builds
//= link my_custom.css
Enter fullscreen mode Exit fullscreen mode
  • Now you have to put the following line inside the <head> tag in the app/layouts/application.html.erb :
<%= stylesheet_link_tag "navbar", media: 'all', 'data-turbolinks-track' => true %>
Enter fullscreen mode Exit fullscreen mode

And that's it. You don't even need to restart the server jut refresh the page. If you want to make sure the CSS file has been recognized/loaded, you can inspect the page and look for the loaded resources.

Disclaimer: I'm learning Rails as I go so improvement suggestions are welcomed

Discussion (0)