Last active
December 2, 2025 08:46
-
-
Save rubyandcoffee/592cdf13586548a7a26c30adeeb7adc2 to your computer and use it in GitHub Desktop.
Bootstrap with Rails 7
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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> | |
| ``` |
My CSS is working fine but the javascript part doesn't looks good like it's not working.
Thanks!
Thanks! ✌️
big thank you!
Thanks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nevermind