Bootstrap with Rails 7

Bootstrap - Rails 7

Adding Bootstrap to Rails 7

Reference: https://www.linkedin.com/pulse/rails-7-bootstrap-52-importmap-md-habibur-rahman-habib/

INSTRUCTIONS

1. Add the following to Gemfile:
gem "bootstrap"
gem "sassc-rails"

Then $ bundle install

2. Rename application.css to application.scss

3. Import Bootstrap styles in app/assets/stylesheets/application.scss:
@import "bootstrap";

4. Include bootstrap in your app/javascript/application.js:
import "popper"
import "bootstrap"

5. Go to config/importmap.rb and add the following:
pin "popper", to: 'popper.js', preload: true
pin "bootstrap", to: 'bootstrap.min.js', preload: true

6. Add the following to config/initializers/assets.rb:
Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js)

7. Test that everything works by adding some navigation (see below example) and restarting the server.

```
<div class="container-flouid">
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container">
      <a class="navbar-brand" href="/">
        <h3>Your Logo</h3>
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Member</a>
          </li>
          <li class="nav-item">
            <a class="nav-link active" href="#">Courses</a>
          </li>

          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Blog</a>
          </li>

          <li class="nav-item">
            <a class="nav-link active" aria-current="page" href="#">Event</a>
          </li>

        </ul>
        <form class="">
          <a class="btn btn-outline-primary mr-2" href="#">Login</a>
          <a class="btn btn-outline-success" href="#">Become member</a>
        </form>

      </div>
    </div>
  </nav>
</div>
```

Finally something that works thank you so much!

Thank you very much! If you don't specify the Bootstrap version, will it install the latest version directly?

@AlexandreMdeAlmeida You're very welcome and yes, it'll install the latest version 👍

Thank you!

@AlexandreMdeAlmeida You're very welcome and yes, it'll install the latest version 👍

Thank you! 🙌🏼

Thanks!!! It works perfectly.

Thank you so much!

Thank you!

Simple and perfect, I was looking for this for a long time, thank you
#Brasil

It works! A thousand thanks!

Many people claimed that it would work by simply starting a new rails project with --css=bootstrap -j esbuild. It consistently yields error messages such as "application cannot be found in the asset pipeline". It amazes me that something works so perfectly in such a straightforward way! Thank you!

@dc20433 They claimed that because it works. You just need to start your Rails server with .bin/dev, not rails s to compile the assets. This guide is for importmaps.

Hi inmydelorean: I did $rails new testapp --css-bootstrap -j esbuild, and started the server in the project folder with bin/dev (.bin/dev shows No such file or directory), and got rails error messages: The asset "application.css" is not present in the asset pipeline, with the following line highlighted:

<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>

You can start the Rails server with bin/rails this should solve your problem.

bin/rails server -p 3000

Many thanks Dutth77. Using your method to start the Rails can get you the Rails logo page, but the error message I posted earlier will appear after creating Controller, Views, and Routes. I am using Rails 7.1.3.4 and Ruby 3.2.2.

Thank you! So if I want to write some custom CSS, which file will I write to?

Thank you! So if I want to write some custom CSS, which file will I write to?

Nevermind

My CSS is working fine but the javascript part doesn't looks good like it's not working.

Thanks!

Thanks! ✌️

big thank you!