DEV Community

Christian Sedlmair
Christian Sedlmair

Posted on • Updated on

Setup Bootstrap on Rails-7 and Vite

Overview

This guide may work, but as of 2024, we would prefer to build new projects without any style framework. CSS has become feature-rich enough.

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.

(Alternative would be: minify the bootstrap CSS and add the minified version to the frontend folder. Then, Vite is clever enough for not loosing time for bundling that. On that way HMR would also rely fast and its cleaner because having only one asset pipeline)

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)