Easily customize Bootstrap without a build step

Sometimes, you want to easily link the bootstrap stylesheet and only changing some of the bootstrap variables. This would not be necessary if bootstrap defaulted to css variables for their components.

bootstrapcdncustomizeprimary colorurl

Example

Insert this in your HTML

<link href="/bootstrap/5.3.0.css?primary=%23f26522&min-contrast-ratio=2&link-decoration=none&body-color=%2334495e&theme[tertiary]=red&theme[quaternary]=blue" rel="stylesheet">

Elements will look like this

anchor tag My Link
.btn .btn-primary
.btn .btn-outline-primary

Other Pro Tips

  • You can add other paramters to the URL that would be in the _variables.scss in bootstrap. For example: 
    &min-contrast-ratio=2
  • You can add more items to the theme like tertiary by defining a theme parameter with comma-separated key:value pairs. For example: 
    &theme[tertiary]=red&theme[quaternary]=blue
  • Remember that # (hashes) have to be encoded or it does not make it to the server