• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How To Change/Overwrite Colours In Bootstrap 4

Front End Development · September 8, 2017

Well, this one just stung me and a client after migrating from Bootstrap v3 over to v4 in a project.

In Bootstrap of yesteryear, you overrode colours using separately named variables like $brand-primary if you’re new to v4, you’ll probably try and use variables like these and discover they do nothing.

In Bootstrap v4 colours have been moved into a Sass map. This means separate variables for colours no longer exist. The theme colours are now defined inside of Bootstrap’s variables file here which is a map of colours using similar names from v3.

To overwrite these colours you firstly need to create your own variables file which you import FIRST before Bootstrap so your variables are used in preference over Bootstrap’s defaults.

To change the primary colour, just define the following in your variables file:

$theme-colors: (
  primary: #333
);

This will overwrite the primary colour, but leave the other defaults intact. That’s it. I really wish the Bootstrap team documented this better and made it known, it really caught me off guard.

To override more than one colour, just comma separate them using the syntax in the linked variables file in the Bootstrap repo (if you’re not familiar with maps).

Dwayne

Leave a Reply Cancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tolga
Tolga
5 years ago

Why not just set the primary?
$primary: #333

I think the way you are doing it is right, because the bootstrap documentations says to, but I can’t figure out why.

0

Primary Sidebar

Popular

  • Testing Event Listeners In Jest (Without Using A Library)
  • How To Get The Hash of A File In Node.js
  • Thoughts on the Flipper Zero
  • Waiting for an Element to Exist With JavaScript
  • How To Paginate An Array In Javascript
  • How To Mock uuid In Jest
  • How To Get Last 4 Digits of A Credit Card Number in Javascript
  • How to Use Neural DSP Archetype Plugins With the Quad Cortex
  • How To Decompile And Compile Android APK's On A Mac Using Apktool
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?

Recent Comments

  • Kevmeister68 on Start-Ups and Companies That Embrace Work From Anywhere Will Be More Likely to Survive the Coming Recession in 2023
  • kevmeister68 on What Would Get People Back Into the Office?
  • Dwayne on PHP Will Not Die
  • Dwayne on How to Create a Blockchain With TypeScript
  • kevmeister68 on PHP Will Not Die

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz