How to add bootstrap 5 to an existing Rails 7 app

THis is how to install bootstrap 5 in existing Rails 7 application. The keyword “existing” is important because for a new application you can try following:

<strong>sudo apt install npm
</strong>rails new app-name --database mysql -j esbuild -c bootstrap  Code language: HTML, XML (xml)

But what about putting bootstrap 5 into an existing Rail 7 application?

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

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

Then bundle install

  1. Rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.scss
  2. Import Bootstrap styles in app/assets/stylesheets/application.scss:
    @import "bootstrap";
  3. Include bootstrap in your app/javascript/application.js:
    import "popper"
    import "bootstrap"
  4. Go to config/importmap.rb and add the following:
    pin "popper", to: 'popper.js', preload: true
    pin "bootstrap", to: 'bootstrap.min.js', preload: true
  5. Add the following to config/initializers/assets.rb:
    Rails.application.config.assets.precompile += %w( bootstrap.min.js popper.js)
  6. Edit app/views/layouts/application.html.erb and replace with:
<!DOCTYPE html>
<html>
  <head>
    <title>Blog</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
 
    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
  </head>
	<div class="container-flouid">
	  <nav class="navbar navbar-expand-lg bg-light">
		<div class="container">
		  <a class="navbar-brand" href="/">
			<h3>Blog 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="/articles">Articles</a>
			  </li>

			  <li class="nav-item">
				<a class="nav-link active" aria-current="page" href="/articles/new">New Article</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>
  <body>
	  <div class="container">
		<%= yield %>
	  </div>
  </body>
</html>
Scroll to Top