How to customize Bootstrap 5 via online tool?-CodePudding

For Bootstrap 3 there was a very handy tool to customize which features you want inside the css/js minified files (in order to save loading time).

I'm reading the manual for Bootstrap 5 but honestly I don't understand how to do it. I also read the optimize page and also here I didn't find anything useful.

Would you please help me how to keep in the minified files only the features I need?

CodePudding user response：

While the Bootstrap docs imply that a bundler is needed to load specific Bootstrap component script files, you can simply use ES6 imports to configure what's loaded. Browser support is good.

So you wouldn't load the comprehensive dist files. You'd load a custom script that imports what you need and corresponds to the SCSS files you're using. It would look something like this:

<head>
  <script src="https://cdnjs.../popper.js/.../popper.min.js"></script>

  <script type="module">
    import '/bootstrap/main/js/dist/tooltip.js';
  </script>

  <script>
    let tooltipTriggerList = []
      .slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    let tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) {
      return new bootstrap.Tooltip(tooltipTriggerEl)
    })
  </script>
</head>

<body >
  <p title="A tooltip." data-bs-toggle="tooltip">Hover for a Bootstrap Tooltip.</p>
</body>

Note that imported script files must be served with appropriate CORS headers and the MIME type application/javascript or you'll get errors.