Bootstrap Theme and Color Customization - The Right & Easy Way

🎨 Have you struggled with customizing your Bootstrap theme? Learn how to customize colors the right way, and the easy way.

Watch the video and follow these steps.
00:00 - Intro
00:13 - Preamble
00:54 - Install Prerequisites
01:39 - Initial Bootstrap Setup
02:08 - CSS Node Project Setup
03:35 - CSS Project Flow Overview
03:46 - Custom theme SCSS Setup
04:22 - Generating the Custom Theme CSS
05:16 - Making changes to the theme
05:38 - Next level Bootstrap Variables
06:00 Outro

Save the steps for next time:
Steps:
👉 Install Node JS
👉 Install SASS & AutoPrefixer
npm install -g sass postcss-cli autoprefixer
👉 Import the Bootstrap JS files into your page head
👉 Create CSS folder within your site
👉 NPM Init a Node project in your CSS Folder
npm init
👉 Install Bootstrap dependency into your Node project
npm install --save bootstrap
👉 Import Bootstrap into your SCSS File
@import "node_modules/bootstrap/scss/bootstrap";
👉 Edit your theme variables ABOVE the bootstrap import in your SCSS file
👉 Import your CSS file into your projects head, and refresh!

Hope you found this video helpful and avoid some of the frustration I experienced!

NodeJS:
Bootstrap:
JS Files:
SASS:
AutoPrefixer:
Bootstrap Repo:

Music (looped):

[anthony-]

Very clear and right to the point. Excellent!

[cenda]

THAT'S WHY HE'S THE GOAT! THE GOAT! Finally a video that shows the whole process. Thanks dude!

[kasperkat]

Nice and clear and easy. Thanks for this video!

[stephen]

Fantastic, my friend. Many thanks indeed !!

[nathanstanford]

I used to have a copy of the page you display where can I get a new copy of it? I can't find where or where I put it.

[joemclemore]

This was super helpful and easy to understand. Much appreciated -thanks @Dave6!

at the beginning you have an index.html file with all the components; where do you get that file or the html code it has... the truth is that you have it from the start of the video and you don't indicate how you got to that code.

[elvykamunyokomanunebo]

Thanks pal,
You've earned a rocket point from me.
Just a few questions:
1) How does this work with deployment
2) I've heard that this is quite bulky, does it effect performance i.e. does it effect how quickly the page loads?

Thanks

Elvy

[HackHeyner]

Some people just don't get enough credit for the good they do in the world.

[fnamelname]

Thanks! Is there any way to use @use instead of import? It's not the end of the World, bootstrap itself still uses import, I was just wondering if it can be done easily.

[bintangnaufal]

how can i change the colors for dark mode? i tried changing some dark theme only $variables and nothing works :(((( help pls quickkk :((

[sewalsh]

I Need whole lesson before this.... Sigh

[henryg]

Good god, I’d throw that keyboard out the window….