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
👉 Create bootstrap.css and bootstrap.scss in your node project
👉 Import Bootstrap into your SCSS File
       @import "node_modules/bootstrap/scss/bootstrap";
👉 Edit your theme variables ABOVE the bootstrap import in your SCSS file
👉 In a terminal, execute your bootstrap.scss file to generate the CSS
       sass bootstrap.scss bootstrap.css
👉 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:
https://nodejs.org/en/download/
Bootstrap:
https://getbootstrap.com/
JS Files:
https://getbootstrap.com/docs/5.0/get...
SASS:
https://sass-lang.com/install
AutoPrefixer:
https://github.com/postcss/autoprefixer
Bootstrap Repo:
https://github.com/twbs/bootstrap

Music (looped):
https://www.free-stock-music.com/fsm-...

• #howto_style
• #bootstrap
• #custom_theme
• #bootstrap_custom_theme
• #how_to
• #how_to_make_custom_theme
• #theme_customization