How to Customize Bootstrap

How to customize Bootstrap 5 color scheme with CSS?

Short answer: You can't easily change the entire color scheme using CSS. Use SASS to change the color scheme

However, you can override specific Bootstrap style using CSS overrides.

The concept is the same regardless of Bootstrap version. As explained in the duplicate..

"you can override the Bootstrap CSS by adding CSS rules that follow
after the bootstrap.css and use the correct CSS specificity"...

For example..

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
  <style>
  /* override bootstrap styles */
  body {
     background-color: pink;
  } 
  </style>
  <title>Hello, world!</title>
</head>

Or put the overrides in a separate CSS file and reference that file,

"One way to customize is simply using CSS to override Bootstrap CSS.
For maintainability, CSS customizations are put in a separate
custom.css file, so that the bootstrap.css remains unmodified. The
reference to the custom.css follows after the bootstrap.css for the
overrides to work..."

Finally,

"When making customizations, you should understand CSS Specificity.
Overrides in the custom.css need to use selectors that are the same
specificity as (or more specific) the bootstrap.css"

Codeply

How to Customize Bootstrap 4

https://v4-alpha.getbootstrap.com/about/license/

Read the first couple Lines. Bootstrap has an MIT open source license. you can find more on that here. https://en.wikipedia.org/wiki/MIT_License

You can copy and paste the code that you want however you must keep the Copyright title intact for the pieces that you use from bootstrap.

Customizing Bootstrap CSS template

The best thing to do is.

1. fork twitter-bootstrap from github and clone locally.

they are changing really quickly the library/framework (they diverge internally. Some prefer library, i'd say that it's a framework, because change your layout from the time you load it on your page). Well... forking/cloning will let you fetch the new upcoming versions easily.

2. Do not modify the bootstrap.css file

It's gonna complicate your life when you need to upgrade bootstrap (and you will need to do it).

3. Create your own css file and overwrite whenever you want original bootstrap stuff

if they set a topbar with, let's say, color: black; but you wan it white, create a new very specific selector for this topbar and use this rule on the specific topbar. For a table for example, it would be <table class="zebra-striped mycustomclass">. If you declare your css file after bootstrap.css, this will overwrite whatever you want to.

How to Customize Bootstrap 4.3 from BootstrapCDN

If it is a class in bootstrap you want overridden, you would need to add something like this: .class { color:red !important; }

It is basically saying like apply this style. It will have priority over other styles the same class has, regardless of order in your stylesheet.

How to extend/modify (customize) Bootstrap with SASS

Update 2022 (Bootstrap 5)

Generally speaking, customizing Bootstrap 5 SASS works the same way as it did in Bootstrap 4. However, some of the maps have changed (and new ones have been added) so you should follow the Bootstrap SASS documentation for details on how to add, remove or modify any of the maps.

Recent comments on this post indicate there's still some confusion about the order of customizations and imports. However, this concept hasn't changed...

"Variable overrides must come after our functions are imported, but before the rest of the imports"

Because of the way SASS variable defaults work, bootstrap ("the rest of the imports") should be imported AFTER any variable customizations/changes. Since your variable changes will not contain the !default flag, your changes will not be overridden by the Bootstrap defaults when bootstrap is imported at the end.

The proof is in the pudding

Here's how to override / customize Bootstrap 4 with SASS...

Overrides and customizations should be kept in a separate custom.scss file that is separate from the Bootstrap SASS source files. This way any changes you make don't impact the Bootstrap source, which makes changes or upgrading Bootstrap later much easier.

1- Consider Bootstrap's SASS folder structure, alongside your custom.scss...

|-- \bootstrap
|   |-- \scss
|   |   |-- \mixins
|   |   |-- \utilities
|   |   |-- bootstrap.scss
|   |   |-- variables.scss
|   |   |-- functions.scss
|   |   |-- ...more bootstrap scss files
|   custom.scss

2- In your custom.scss, import the Bootstrap files that are needed for the overrides. (Usually, this is just variables.scss. In some cases, with more complex cutomizations, you may also need the functions, mixins, and other Bootstrap files.). Make the changes, then @import "bootstrap". It's important to import Bootstrap after the changes...

/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* make changes to the !default Bootstrap variables */    
$body-color: green;
        
/* finally, import Bootstrap to set the changes! */
@import "bootstrap";

2a (optional) - Also, you can extend existing Bootstrap classes after the @import "bootstrap"; to create new custom classes. For example, here is a new .row-dark class that extends (inherits from) the Bootstrap .row class and then add a background-color.

 /* create new custom classes from existing classes */
 .row-dark {
    @extend .row;
    background-color: #333333;
    color: #ffffff;
 }

3- Compile the SASS (node-sass, gulp-sass, webpack/NPM, etc..). The CSS output will contain the overrides! Don't forget to check the includePaths if your @imports fail. For a full list of variables you can override, see the variables.scss file. There are also these global variables.

Bootstrap SASS Demo on Codeply

In summary, here's how it works:

1_ First, when the custom.scss file is processed using SASS, the !default values are defined in the bootstrap/variables.scss.

2_ Next, our custom values are set, which will override any of the variables that had !default values set in bootstrap/variables.scss.

3_ Finally, Bootstrap is imported (@import "bootstrap") which enables the SASS processor (A.K.A. compiler) to generate all the appropriate CSS using both the Bootstrap defaults and the custom overrides.

For those that don't know SASS, try this tool that I made.

Also see:

How to get 15 columns in Bootstrap 4 in SASS CSS?

Bootstrap v4 grid sizes / Sass List

Customizing Bootstrap CSS template

Extending Bootstrap 4 and SASS

How to customize Bootstrap 5 via online tool?

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 class="p-4">
  <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.

How to customize bootstrap popover design?

Thanks to the comment that @isherwood put in my answer, I finally found that these codes could change the border design of my popover:

/* define varible for getting button from html */
let myButton = document.getElementById("btnSearch");
/* define bootstrap popover */
var pop = new bootstrap.Popover(myButton, {
    trigger: "manual",
    title: "You must enter some text for searching in our site!",
    placement: "bottom",
    customClass: "pop-class"
});

/* if user clicks on button checks that the input search bar is "empty" or not, if it is empty "shows" the popover */
myButton.addEventListener("click", function() {
    let searchText = document.getElementById("search-bar").value;

    if (searchText.length < 1) {
        pop.show();
    }
});

/* if user clicks outside the search button this function hides the popover */
myButton.addEventListener("blur", function() {
    pop.hide();
});

:root {
    --color1: rgb(65, 129, 171);
    --color2: rgb(124, 201, 222);
    --color3: rgb(229, 131, 185);
    --color4: white;
    --color5: rgb(236, 215, 110);
}

/* ------------------------------- */
/* customizing the style of popover */
/* ------------------------------- */

.pop-class {
    color: var(--color3);
    border-radius: 0px;
    border: 3px solid var(--color3);
}

.pop-class .popover-header {
    background-color: var(--color4);
}

.pop-class .popover-header::before {
    border-bottom: transparent;
}

.pop-class .popover-arrow {
    top: calc(-.5rem - 2px);
}

.pop-class .popover-arrow::before {
    border-color: var(--color3);
    border-right-color: transparent;
    border-left-color: transparent;
}

.pop-class .popover-arrow::after {
    border-top-width: 3px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css" integrity="sha512-1fPmaHba3v4A7PaUsComSM4TBsrrRGs+/fv0vrzafQ+Rw+siILTiJa0NtFfvGeyY5E182SDTaF5PqP+XOHgJag==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<!-- bootstrap search bar -->
<div class="container-fluid" id="parentAll">
  <div class="row">
    <div class="col-md-9 mx-auto">
      <div class="input-group my-5">
        <button id="btnSearch" class="btn btn-outline-secondary px-5" type="button">
                    <i id="iconSearch" class="bi bi-search"></i>
                </button>
        <input type="text" class="form-control form-control-lg" id="search-bar">
      </div>

    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

where shall I put custom.scss file to customize bootstrap component?

It doesn't meter where is your file is. The point is to include your custom variables before variables from bootstrap.

You can create BS file, where you can include BS components and other elements and in this file you can override default variables.

More over, in this case you can optimize your target CSS file.

One more thing - in example I using BS5, in v4 approach the same (because it's SCSS).

Your structure:

.
└── scss/
    ├── _bs-variables.scss
    ├── custom-bootstrap.scss
    └── custom.scss

Example:

_bs-variables.scss:

$primary:       tomato;

custom-bootstrap.scss:

/*!
 * Bootstrap v5.1.3 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "~bootstrap/scss/functions";

// override default variables
@import "./bs-variables"; // here is your custom variables include
// default BS variables
@import "~bootstrap/scss/variables";

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

// Layout & components
@import "~bootstrap/scss/root";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/containers";
...

custom.scss:

@import './custom-bootstrap';

// other SCSS code
...