Custom Bootstrap 5 Starter

bs-custom.scss

// Importing fonts
@import url('https://fonts.googleapis.com/css2?family=Ubuntu&display=swap');

// Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// Include any default variable overrides here
$primary: #2789d8;

$theme-colors: (
// Override theme (removing the original theme)
);
// Use this to just add some colors
// $theme-colors: map-merge($theme-colors, $custom-colors);

// Changing font base
$font-family-base: 'Ubuntu', sans-serif;

@import "../node_modules/bootstrap/scss/variables";

// Include any default map overrides here

@import "../node_modules/bootstrap/scss/bootstrap";

Custom Bootstrap 5 Starter

Installation

1. Install Bootstrap 5.2.3

npm i bootstrap@5.2.3

3. Make /bootstrap directory in root folder

mkdir bootstrap

5. Copy the gists above into /bootstrap directory

Development

• Customize Bootstrap in bootstrap/bs-custom.scss (make sure to edit the sass .scss file, not the compiled .css)
• To watch the .sass file, run:

sass --watch bootstrap/bs-custom.scss bootstrap/bs-custom.css --style compressed

or insert this snippet below to package.json

"sass": "sass --watch bootstrap/bs-custom.scss bootstrap/bs-custom.css --style compressed"

then run

npm run sass

Minimal CSS Var Customize

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");

:root {
  /* Font */
  --bs-font-sans-serif: "Plus Jakarta Sans", Arial, sans-serif;

  /* Color (R, G, B) Format */
  --custom-primary: 39, 137, 216;
  --bs-blue: rgb(var(--custom-primary));
  --bs-primary: rgb(var(--custom-primary));
  --bs-primary-rgb: var(--custom-primary);

  --custom-secondary: 216, 118, 39;
  --bs-secondary: rgb(var(--custom-secondary));
  --bs-secondary-rgb: var(--custom-secondary);
}