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:
nodejs.org/en/download/
Bootstrap:
getbootstrap.com/
JS Files:
getbootstrap.com/docs/5.0/get...
SASS:
sass-lang.com/install
AutoPrefixer:
github.com/postcss/autoprefixer
Bootstrap Repo:
github.com/twbs/bootstrap
Music (looped):
www.free-stock-music.com/fsm-...

Хобби