Setup Bootstrap with Parcel for local development

index.js

import $ from "jquery";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.css"; // Import precompiled Bootstrap css
import "@fortawesome/fontawesome-free/css/all.css";
import "./offcanvas.css";
import Holder from "holderjs";

$(() => {
  "use strict";

  $('[data-toggle="offcanvas"]').on("click", function() {
    $(".offcanvas-collapse").toggleClass("open");
  });
});

Holder.addTheme("thumb", {
  bg: "#55595c",
  fg: "#eceeef",
  text: "Thumbnail"
});

parcel_bootstrap.md

Setup Bootstrap with Parcel - Theme development

First, create a folder and run the following to get started.

npm init -y
npm install bootstrap jquery popper.js
npm install --save-dev parcel-bundler @fortawesome/fontawesome-free

https://parceljs.org/recipes.html#importing-bootstrap-with-precompiled-styles

Then grab the basic HTML you need from https://getbootstrap.com/docs/4.4/examples/ and put it inside an index.html file. Don't worry about any assets, you won't need them.

Remove all the CSS/Javascript includes and replace with <script src="./index.js"></script>.

Create index.js and put the following in it.

import "bootstrap";
import "bootstrap/dist/css/bootstrap.css"; // Import precompiled Bootstrap css
import "@fortawesome/fontawesome-free/css/all.css";

Then start parcel index.html and begin developing!

Also consider https://github.com/typekit/webfontloader when using Google Fonts

https://www.reddit.com/r/javascript/comments/9xna9r/recommended_base_packagejson_for_modern_react/

React + Typescript + Bootstrap + Example responsive navbar layout

https://codesandbox.io/s/reacttypescriptbootstraplayout-v5qjm