RailsHow-ToBeginner · 4 min read

How to Use Bootstrap with Rails in Ruby on Rails

To use Bootstrap in a Ruby on Rails app, add the bootstrap gem to your Gemfile and run bundle install. Then import Bootstrap styles and JavaScript in your asset files or use importmap or webpacker depending on your Rails version.

📐

Syntax

Here is the basic syntax to add Bootstrap to a Rails project:

Add gem 'bootstrap' to your Gemfile.
Run bundle install to install the gem.
Import Bootstrap CSS in app/assets/stylesheets/application.bootstrap.scss using @import 'bootstrap';.
Include Bootstrap JavaScript in app/javascript/application.js or app/assets/javascripts/application.js depending on your setup.

ruby and javascript and scss

gem 'bootstrap', '~> 5.3.0'

// app/assets/stylesheets/application.bootstrap.scss
@import 'bootstrap';

// app/javascript/application.js
import 'bootstrap'
import './stylesheets/application.bootstrap.scss'

💻

Example

This example shows how to add Bootstrap 5 to a Rails 7 app using importmap (default in Rails 7). It includes the gem, imports styles, and uses Bootstrap classes in a view.

ruby, scss, erb, javascript

## Gemfile
gem 'bootstrap', '~> 5.3.0'

# Run in terminal
bundle install

# app/assets/stylesheets/application.bootstrap.scss
@import 'bootstrap';

# app/javascript/application.js
import 'bootstrap'

# app/views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap with Rails</title>
  <%= stylesheet_link_tag 'application.bootstrap', 'data-turbo-track': 'reload' %>
  <%= javascript_importmap_tags %>
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">MyApp</a>
  </nav>
  <main class="container mt-4">
    <h1 class="text-primary">Welcome to Bootstrap in Rails!</h1>
    <button class="btn btn-success">Click me</button>
  </main>
</body>
</html>

Output

A web page with a light navbar, a blue heading, and a green Bootstrap styled button.

⚠️

Common Pitfalls

Common mistakes when adding Bootstrap to Rails include:

Not importing Bootstrap CSS correctly, causing styles not to apply.
Forgetting to include Bootstrap JavaScript, so interactive components like modals or dropdowns don't work.
Mixing asset pipeline and webpacker/importmap setups incorrectly.
Not restarting the Rails server after adding gems or changing asset files.

scss

// Wrong: Not importing Bootstrap CSS
// app/assets/stylesheets/application.css
/* No @import 'bootstrap'; */

// Right: Use SCSS and import Bootstrap
// app/assets/stylesheets/application.bootstrap.scss
@import 'bootstrap';

📊

Quick Reference

Summary tips for using Bootstrap in Rails:

Use the bootstrap gem for easy integration.
Import Bootstrap styles in SCSS files, not plain CSS.
Include Bootstrap JavaScript for interactive features.
Match your asset setup: importmap, webpacker, or asset pipeline.
Restart your server after changes.

✅

Key Takeaways

Add the bootstrap gem and run bundle install to include Bootstrap in Rails.

Import Bootstrap CSS in SCSS files and include Bootstrap JavaScript for full functionality.

Match your Rails asset setup (importmap, webpacker, or asset pipeline) when adding Bootstrap.

Restart the Rails server after adding or changing Bootstrap files.

Use Bootstrap classes in your views to style elements easily.