-
-
Save rubyandcoffee/592cdf13586548a7a26c30adeeb7adc2 to your computer and use it in GitHub Desktop.
| 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> | |
| ``` |
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.
Finally something that works thank you so much!