Last active
June 25, 2024 00:37
-
-
Save rubyandcoffee/592cdf13586548a7a26c30adeeb7adc2 to your computer and use it in GitHub Desktop.
Bootstrap with Rails 7
This file contains 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> | |
``` |
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" %>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@dc20433 They claimed that because it works. You just need to start your Rails server with
.bin/dev
, notrails s
to compile the assets. This guide is for importmaps.