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.2.3.css?primary=%23f26522&min-contrast-ratio=2&link-decoration=none&body-color=%2334495e" 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