DEV Community 👩‍💻👨‍💻

Christian Sedlmair
Christian Sedlmair

Posted on • Updated on

Setup Bootstrap on Rails-7 and Vite

Overview

Note

We setup Bootstrap scss files upon asset pipeline for avoide slowing down Vite HMR. Custom stylesheets can be added inside vite app/frontend/. We setup one popover to make it working for checking if all the popper.js and bootstrapp javascript is working.

Links

Bootstrap/getting-started/vite

Prerequesites

Asset Pipeline

gem 'bootstrap', '~> 5.2.0'
Enter fullscreen mode Exit fullscreen mode
$ bundle install
Enter fullscreen mode Exit fullscreen mode

add app/assets/stylesheets/_settings.scss for configuring bootstrap sass variables

rename app/assets/stylesheets/application.css to .scss if it isnt already done

remove the lines //= require tree and //= require . if it isnt yet.

@import "settings";
@import "bootstrap";
Enter fullscreen mode Exit fullscreen mode

We use only the scss files from the gem. On Foundation i did the same by smylinking to the yarn package into the asset pipeline. The javascript we get from the yarn package:

Javascript Packages

$ npm i bootstrap @popperjs/core
Enter fullscreen mode Exit fullscreen mode

frontend/entrypoints/application.js

// import 'bootstrap/js/src/alert'  
// import 'bootstrap/js/src/button'  
// import 'bootstrap/js/src/carousel'  
import 'bootstrap/js/src/collapse'  
import 'bootstrap/js/src/dropdown'  
// import 'bootstrap/js/src/modal'  
// import 'bootstrap/js/src/popover'  
import 'bootstrap/js/src/scrollspy'  
// import 'bootstrap/js/src/tab'  
// import 'bootstrap/js/src/toast'  
// import 'bootstrap/js/src/tooltip' 

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;

// initialize the page
window.addEventListener('load', (event) => {
    initPage();
});
window.addEventListener('turbo:render', (event) => {
    initPage();
});
function initPage() {
      // initialize popovers
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  }
}
Enter fullscreen mode Exit fullscreen mode

Layout

make sure the stylesheet_link_tag is present like described

Test View

%button.btn.btn-lg.btn-danger{"data-bs-content" => "And here's some amazing content. It's very engaging. Right?", "data-bs-title" => "Popover title", "data-bs-toggle" => "popover", :type => "button"} Click to toggle popover
Enter fullscreen mode Exit fullscreen mode

Image description

=> If the popover works and looks like this, bootstrap styles are working, popper.js is working and popovers are initialized.

YIPPIE!

Overview


P.S.:

Symlinking SASS variables

Inside frontend/stylesheets/, create a symlink like this:

$ ln -s ../../assets/stylesheets/_settings.scss .
Enter fullscreen mode Exit fullscreen mode

Then from all the stylesheets, by example frontend/stylesheets/components/button.scss, import it like this:

@import '../settings';
Enter fullscreen mode Exit fullscreen mode

symlinks to a file are well handled by git (otherwise than symlinks to a folder) and they should landing well on production machine.

Top comments (0)

Make Your Github Profile Stand Out

>> Check out this classic DEV post <<