Add custom CSS to Rails app with Bootstrap

#rails #ruby #webdev #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

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 %>

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

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →