Bootstrap 4 Theme Customization (with Sass) | BOOTSTRAP 4 TUTORIAL

50
37



Bootstrap 4 makes the customization of themes, colors and sizes easy! Use SASS to adjust the look of your Bootstrap 4 project!
You prefer CSS? Join the Full CSS course:
Check out all our other courses:

———-

Source Code for the Video:
Full Playlist:
Official Theming Docs:

———-

• Go to and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Join our Facebook community on

See you in the videos!

———-

Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!

Nguồn: https://quydinh.com

Xem thêm bài viết khác: https://quydinh.com/cong-nghe

50 COMMENTS

  1. Thank you for this, as a designer needing more and more control of the frontend result, I've struggled with the concept of scss until today. After many weeks, It clicked, and thanks to this video. It was clear, straightforward, and explained the concept so clearly, much appreciated.

  2. Hi there great tutorial. But with my command sass main.scss main.css it happens nothing it's only this output: /*# sourceMappingURL=main.css.map */ .. need help please

  3. Thanks for the video. I was struggling to get this setup but your video help me find the simply mistake I made. 🙂

  4. What I think is ridiculous is, why are there so many alleged experts in this field, and yet NONE of them can explain it in plain language like you have here Academind. Great job.

  5. The only video after watching many others that really made me understand the basic concept. Great effort. Thank you

  6. Thank you for your video BUT to override primary button color with only changes primary color in theme-colors it is not enough. Such override do not cover all button states like focus, visited, active etc, and it still shows the default blue color in active button state. Please let me know if I'm wrong.

  7. Thanks man! The BS Docs assume the user knows a lot already and that really frustrated a newbie like me because I didn't realize I had to install a SASS compiler. Now it all makes sense!

  8. Great tutorial! Although it seems rest in the end one probably needs a lot of the bootstrap scss files. And it can be a hassle to find the right ones and put them in the correct order. For this reason I think it might be better to have 2 stylesheets, 1 with all of bootstrap and 1 with your custom css that wil overwrite the bootstrap cas as it's the last loaded stylesheet in the HTML file.

  9. Error: Can't find stylesheet to import. If your main.css file is in root the solution would be: "@import "node_modules/bootstrap/scss/bootstrap";"

  10. incase you run into "Sass “Error: Can't find stylesheet to import.” using "@import "../node_modules/bootstrap/scss/bootstrap";"

    use @import "node_modules/bootstrap/scss/bootstrap.scss";

  11. tks you when u want to compile i found problem in comand sass
    PS C:UsersTOSHIBADesktoppro> sass main.scss main.css

    sass : Le terme «sass» n'est pas reconnu comme nom d'applet de commande, fonction, fichier de script ou programme exécutable.

    Vérifiez l'orthographe du nom, ou si un chemin d'accès existe, vérifiez que le chemin d'accès est correct et réessayez.

    Au caractère Ligne:1 : 1

    + sass main.scss main.css

    + ~~~~

    + CategoryInfo : ObjectNotFound: (sass:String) [], CommandNotFoundException

    + FullyQualifiedErrorId : CommandNotFoundException

  12. took me 4 hours but I eventually managed to get there! No more Ruby as mentioned below. GitHub worked fine for me to install SASS. What might be unclear for novices like myself, is that you can extract the zip wherever you fancy (I did it in C), and then the Path you need to edit will prob contain other stuff: that's not a problem, leave everything as it is and just add/edit the saas path. I also received an error when compiling the first time, because I did not reboot my pc after installing (silly I know). Lastly, for some reason, the color picker palette would not pop up at first, but it eventually fixed itself after a few minutes (not sure why, maybe someone can explain)

  13. I'd also recommend using the "Live Sass Compiler" VS Code Extension – no need for ruby or sass installation 🙂

  14. Thanks for the video.
    I have a small query, Changing $font-size-base variable (for changing default bootstrap font size) in custom.scss is not reflecting in output.

  15. how to compile from terminal if sass and css files are in different folders.????.example: parent>sass>main.scss , parent>css>main.css

  16. it is NOT true that it is not difficult. never say such things. for YOU it is not difficult. for others it is indeed. also: do not be so hateful to people like to ummer ameen. I run vsc and was not successful up to now. only to customize colors with node.js in a bootstrap4 environment gives a headache. but thanks for your efforts to help us.

  17. Great job 🙂 …Very Thanks for it…My problem is how to use third-party plugins with using SCSS & NPM bootstrap project? And how to import JS files? If you have it's a related video on udemy kindy share link for purchase…

LEAVE A REPLY

Please enter your comment!
Please enter your name here