Hello guys, Welcome to Africa's Largest Video Search Engine, and you are watching Bootstrap Theme and Color Customization - The Right & Easy Way. and this video is uploaded by DavidASix at 2021-11-03T12:06:11-07:00. We are just promoting this video only for entertainment and educational purpose only. I hop you like our Video Search Engine. [9FX5NgRrdnc]
| Name | Bootstrap Theme and Color Customization - The Right & Easy Way |
| Video Uploader | Video From DavidASix |
| Upload Date | This Video Uploaded At 03-11-2021 19:06:11 |
| Video Discription | 🎨 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/getting-started/download/ 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-team-escp-lazy-aftermoon.html [9FX5NgRrdnc] |
| Category | Howto & Style |
| Tags | bootstrap | custom theme | bootstrap custom theme | how to | how to make custom theme | theme customization |
