I don’t really understand why the videos like yours with actual content don’t get enough views and some garbage videos have millions of views .... after so many stupid videos this is where I got my answer.... thanks a million
FOR EVERYONE HAVING PROBLEMS WITH THE CUSTOM COLORS NOT CHANGING Someone already said this but you can add the following under your map-merge function (for example): ``` $theme-colors: map-merge($theme-colors, $custom-theme-colors); // You should already have this, so no need to copy this part. // Start copying at the line below $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); $utilities-colors: map-merge( $theme-colors-rgb, ( "black": to-rgb($black), "white": to-rgb($white), "body": to-rgb($body-color) ) ); $utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text"); $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg"); // Stop copying at the line above @import "../node_modules/bootstrap/scss/bootstrap"; // You should already have this as well, so no need to copy this part. ``` If this doesn't work, make sure you've typed everything in correctly. Reply to this comment if you have any questions! Also make sure you are watching your sass file at the bottom of the page, you have to click that button every time you load up your project. Hope it helps!
Considering the convoluted nonsense that you used to have to go through with Sublime text to setup sass and compile, Livesass is brilliant. Just to add, excellent tutorial as always!
Live sass didnt creat a Css folder for me so I created the Folder myself and I copied the css files there and then it worked. I hoped that helped anyone who has the same problem like me.
for those of you that cannot get npm init to work here are 3 commands you should run: 1-set-ExecutionPolicy RemoteSigned -Scope CurrentUser 2-Get-ExecutionPolicy 3-Get-ExecutionPolicy -list good luck y'all
6:01 - It is just what I was searching for.... WHY I need to write the variable ABOVE the import line. I was writing it in other way and didnt get any results!
This is a great course, I went through all the Bootstrap 5 Crash Course now, very helpful. One questions, it was mentioned that overriding styles using a individual css is not recommended, but I wonder why. If I just have to modify some styles, it seems so much easier to me just to add a small, individual stylesheet, rather than setting all this up. What is the reason using an individual css is not recommended?
I think the answer is if u have small project and small changes it is ok, but if your project is huge - its not an option. In my bootstrap course it was explained like this "This is how all components are presented within Bootstrap. Almost any external change is the result of the use of variables. This approach ensures that you bind to the framework and change all components when you change the basic settings. Many developers, when creating their components, miss this point, which negatively affects the future support of the project, since changing the settings will not change the component. To do this, you will need to edit the CSS separately. If there are dozens of such components, then the possibility of error increases, and the time required for changes will increase significantly." sorry for mistakes^ its just google translate from russian
Exactly, absolutely no need to do all this for small projects. If you're working a project by yourself, you can work with external files. This is basically for really large scale projects that involve teams.
That was a great lesson Thanks....Seriously that lesson has instilled a lot of confidence in my coding going forward. Many Thanks indeed. Wishing you well. Fraser.
Nice tutorial, am learning the web dev, instead of altering the default values with SASS I use the inline CSS I am not sure if that's the right way to do.
Thanks for the training. Really appreciated! Very simple and comprehensive for the starters. Just a quick question, I have a scenario where in Bootstrap-3 the .col-xs-n class was defined outside the media query but in Bootstrap 5 it is defined within the media query. Due to which, the wkhtmltopdf utility is unable to use .col-xs-n class. What do you think is the best idea to create a custom class outside media query and inherit it from the .col-xs-n class. Is it possible to show the video on it please? Thanks in advance!
But before I found your video, I had been trying to make changes to the primary color in the normal bootstrap file I downloaded. I guess because of that, min.css always brings 3 error notifications Also define the standard property 'appearance' for compatibility css(vendorPrefix) Please I need help
Thanks for all tutorials I am stuck here at compile and output the main.scss file. can you please reexplain how to configire the livesass json settings ? I can t get the files in the specified output folder.. Thanks in advance
I couldn't get this to work for backgrounds or text but it did work for buttons e.g. btn-altdark was purple but the other classes e.g. bg-altdark and text-altdark didn't have any styling in dev tools. I've checked my scss against yours. Not sure what is wrong. Any ideas?
Why make simple custom color changes when we can make it insanely difficult installing extra program and compiling stuff left and right... damn, I just wanted to change one color :D
Small edits in .CSS are fine if your project is tiny. If you're going to work in a company or group project, with thousands of lines of code and a bunch of different webpages, that won't do. Learning this is more important than you might think.
I've done everything but the result that I get is only a glimpse of the color that I want the $primary to be. I've rewatched the tutorial many times already and I did what I did but it doesn't work. Please help me! T_T
When I click "Watch Sass" it doesn't compile. It gets stuck on "Working on it..." and it gave the following error in the runtime status: glob pattern string required
You are awesome! Do you know how many videos unsuccessfully made it through my thick skull? You were the first that explained this perfectly. I effing get it now! The only thing I had to look up was how to get npm to install bootstrap 4.6 because the site was originally created with ver. 4 and was afraid weird things might happen or not work with v5. Thanks man!!!
does this also work with Templated Bootsrap? the one that are Free? and should i use this method with the same Bootstrap Version?, in my case im trying to use this 1 template with Different Version of Bootstrap, its like 4.0 something and the current latest ver is around 5.2 bootstrap, also the template has alrd css folder with their own variable q.q
Just an FYI for ppl running BS 5.2+ if you are NOT including the whole boostrap lib there is a very specific order for imports to follow @import '../lib/bootstrap/scss/functions'; @import '../lib/bootstrap/scss/variables'; @import '../lib/bootstrap/scss/maps'; @import '../lib/bootstrap/scss/mixins'; @import '../lib/bootstrap/scss/root'; if you notice certain utilities are not working i.e margins or padding is not being applied, make sure to import @import '../lib/bootstrap/scss/bootstrap-grid'; @import '../lib/bootstrap/scss/bootstrap-utilities';
Hello sir, I am beginner to web development, learning javascript now. i found you have uploaded tutorials on react,graphql,gatsby. in which order I should watch this playlists? react then graphql finally gatsby? please guide me sir
Hi there, i'm having the same issue as some of the other people here. The code doesn't change backgrounds when i write "bg-altdark" or "bg-altlight", i've watched the video a few times to see if i'm making any mistakes but i've written everything like you did, it works on buttons, but not on backgrounds or icons, any idea why is this and what should we do to fix it? Thanks!
I had the same issue, i tried this and it worked, there's probably a better way to do it though but i dont know (paste this in the sass file after you merged the theme colors with your custom ones) $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value"); $utilities-colors: map-merge( $theme-colors-rgb, ( "black": to-rgb($black), "white": to-rgb($white), "body": to-rgb($body-color) ) ); $utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text"); $utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
Anyone have issues with the offcanvas not working when using local bootstrap, when i use cdn it works fine but as soon as I changed to local bootstrap its not working properly. Can you pls help, thanks
i got the solution . I created a new project and from the get go i used and installed bootstrap locally and the issue got fixed . I think the problem was that in the head section u have to replace script tag in the bottom with the new one like this ---- . The problem got fixed just like that .
i have got a big problem. i was using the cdn links like you did in this video, but after downloading the bundle, the image still doesn't show up when the internet is off. Same goes with the icons, they seldom showup. Anybody having any idea what to do other than using cdn?
Thank you man for this course, it is great! BUT.... ok, i have watched all vides from here, but i still don't get why people use Bootstrap instead of normal CSS. Everything is much more easier and clearer than Bootstrap code, specially if you want everything with your own colors and custom things!
People want to avoid reinventing the wheel. Bootstrap gives them a solid UI design base that follows the mobile-first approach. And in earlier days, you had to strongly consider browser-specific differences in CSS support, where Bootstrap took a lot off your plate.
Nice video. But If bootstrap is installed via nmp ... how to make the navigation bar or carousel slider functional. What should I import, where, and how?
I don’t really understand why the videos like yours with actual content don’t get enough views and some garbage videos have millions of views .... after so many stupid videos this is where I got my answer.... thanks a million
That’s how life is
I have been trying to work out how to compile css and sass for a few days now, this video smashed it, lifesaver!!
Been struggling for days on how to customize bootstrap but you are a life saver
Thanks a lot 🎉
Happy to help Eteku! Thanks for watching :)
@@NetNinjathe offcanvas and this part(customizing the setting process all) is not working for me ,idk why pls say smth
Just finished the hole playlist. Great teaching method and straight to the point.
I watch like 15 videos on this and this is the only one I followed and actually had work. Thanks.
FOR EVERYONE HAVING PROBLEMS WITH THE CUSTOM COLORS NOT CHANGING
Someone already said this but you can add the following under your map-merge function (for example):
```
$theme-colors: map-merge($theme-colors, $custom-theme-colors); // You should already have this, so no need to copy this part.
// Start copying at the line below
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge(
$theme-colors-rgb,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
// Stop copying at the line above
@import "../node_modules/bootstrap/scss/bootstrap"; // You should already have this as well, so no need to copy this part.
```
If this doesn't work, make sure you've typed everything in correctly. Reply to this comment if you have any questions!
Also make sure you are watching your sass file at the bottom of the page, you have to click that button every time you load up your project.
Hope it helps!
Thank you! Your solution worked for me!
thanks! why does this work?
try this
// merge the maps to add new theme colors
$theme-colors: map-merge($custom-theme-colors, $theme-colors);
// import bootstrap
@import '../node_modules/bootstrap/scss/bootstrap';
@each $key,$val in $custom-theme-colors{
.bg-#{$key}{
background-color: $val;
}
.text-#{$key}{
color: $val;
}
}
I love you, thx!
Thank you!!
Amazing. Didn’t want to have to learn a whole new language when all I wanted to do was change colours in bootstrap, and now I don’t have to. Thanks!
thanks for this brilliant tutorial, Sass is the easiest and the most useful tool for customizing bootsrap
You're welcome! :)
Considering the convoluted nonsense that you used to have to go through with Sublime text to setup sass and compile, Livesass is brilliant. Just to add, excellent tutorial as always!
This is the only proper video explaining it. Thank you so so much for helping us.
You're very welcome! thanks for watching :)
Look at that, I had to skip to the 19th video to find what I needed, very efficient AND practical.
At last after so many videos I got the correct video, and got clarity on customizing bootstrap themes, Thank you
Great to hear! :)
Got up at 3 am to wait for and watch new episode from Net Ninja!
dedication!
You are gold, explained it as clear as Crystal
Live sass didnt creat a Css folder for me so I created the Folder myself and I copied the css files there and then it worked. I hoped that helped anyone who has the same problem like me.
for those of you that cannot get npm init to work here are 3 commands you should run:
1-set-ExecutionPolicy RemoteSigned -Scope CurrentUser
2-Get-ExecutionPolicy
3-Get-ExecutionPolicy -list
good luck y'all
This is an excellent tutorial. It is concise and just what I was looking for to turn on negative margins in Bootstrap! Thanks!
6:01 - It is just what I was searching for.... WHY I need to write the variable ABOVE the import line. I was writing it in other way and didnt get any results!
This is a great course, I went through all the Bootstrap 5 Crash Course now, very helpful. One questions, it was mentioned that overriding styles using a individual css is not recommended, but I wonder why. If I just have to modify some styles, it seems so much easier to me just to add a small, individual stylesheet, rather than setting all this up. What is the reason using an individual css is not recommended?
I think the answer is if u have small project and small changes it is ok, but if your project is huge - its not an option. In my bootstrap course it was explained like this "This is how all components are presented within Bootstrap. Almost any external change is the result of the use of variables. This approach ensures that you bind to the framework and change all components when you change the basic settings.
Many developers, when creating their components, miss this point, which negatively affects the future support of the project, since changing the settings will not change the component. To do this, you will need to edit the CSS separately. If there are dozens of such components, then the possibility of error increases, and the time required for changes will increase significantly." sorry for mistakes^ its just google translate from russian
Exactly, absolutely no need to do all this for small projects. If you're working a project by yourself, you can work with external files. This is basically for really large scale projects that involve teams.
This is a goldmine. You got a subscription.
Thank you! :)
My neighbors listen to this everyday. It's not like they have a choice. 😁 #GreatTutorials
That was a great lesson Thanks....Seriously that lesson has instilled a lot of confidence in my coding going forward. Many Thanks indeed. Wishing you well. Fraser.
ty Shaun, I've been waiting for this lesson! So now we are true bootstrap ninjas 🐱👤🐱👤🐱👤
Ninja I learned so much from you over the years, thank you
Thanks a lot for video! I always have problems with all this pathes and imports, and it makes mem a bit crazy, but u explained everything so clear!
Right on the money! Thank you, very helpful.
Glad it helped! :)
Such a helpful, well-explained tutorial. Thank you!!
Glad it was helpful! :) thanks for watching
Would be grateful if you do another video continuing bootstrap for admin portal with dashboard and forms.
Nice tutorial, am learning the web dev, instead of altering the default values with SASS I use the inline CSS I am not sure if that's the right way to do.
Thanks for the training. Really appreciated! Very simple and comprehensive for the starters. Just a quick question, I have a scenario where in Bootstrap-3 the .col-xs-n class was defined outside the media query but in Bootstrap 5 it is defined within the media query. Due to which, the wkhtmltopdf utility is unable to use .col-xs-n class. What do you think is the best idea to create a custom class outside media query and inherit it from the .col-xs-n class. Is it possible to show the video on it please? Thanks in advance!
Great and simple video, really opened my eyes up to the power of SCSS and bootstrap 5 👍
Nice job man! finally someone clear and easy explained that issue to me!
You help me save a lot of time. Thanks dude. I subbed
But before I found your video, I had been trying to make changes to the primary color in the normal bootstrap file I downloaded. I guess because of that, min.css always brings 3 error notifications
Also define the standard property 'appearance' for compatibility css(vendorPrefix)
Please I need help
Amazing, spent 2 days and didnt know how to do this. Thank you
Thanks for all tutorials
I am stuck here at compile and output the main.scss file. can you please reexplain how to configire the livesass json settings ? I can t get the files in the specified output folder..
Thanks in advance
Same here
Where have you been all my life! Xd
I love you
I couldn't get this to work for backgrounds or text but it did work for buttons e.g. btn-altdark was purple but the other classes e.g. bg-altdark and text-altdark didn't have any styling in dev tools. I've checked my scss against yours. Not sure what is wrong. Any ideas?
Same for me as well "altlight" and "altdark" isn't working.
Honestly I prefer using raw CSS for my customization. Hope it's okay?
This was rather an excellent tutorial--thank you, siree!
Thanks Arkan, glad it was helpful!
Why make simple custom color changes when we can make it insanely difficult installing extra program and compiling stuff left and right... damn, I just wanted to change one color :D
this is the worst video in the series by far!
Small edits in .CSS are fine if your project is tiny. If you're going to work in a company or group project, with thousands of lines of code and a bunch of different webpages, that won't do. Learning this is more important than you might think.
Great video. I got exactly what I needed by halfway through. Thanks!
Mine isn't compiling into one file.. many files are being compiles in my css folder after watching the scss file?
Thank you very much. Really informative and useful.
Glad it was helpful! :) thanks for watching
This one is best.Wondering how to use custom colors. But how to use custom font
Great content Thanks!. Can you use Node JS in ASP.NET project?
I've done everything but the result that I get is only a glimpse of the color that I want the $primary to be. I've rewatched the tutorial many times already and I did what I did but it doesn't work. Please help me! T_T
Thanks a lot, this video was very helpful.
Glad it was helpful!
Thanks, Buddy. This is what, I was looking for today.
Awesome. Solved my Bootstrap Vue problems.
Have just found your Tutorial, thank you. I a wondering have you done a similar tutorial using VS2022 IDE rather than VS Code? Thanks
When I click "Watch Sass" it doesn't compile. It gets stuck on "Working on it..." and it gave the following error in the runtime status: glob pattern string required
Thank you so much! but I have no idea why map-merge function doesn't work 😢
You are awesome! Do you know how many videos unsuccessfully made it through my thick skull? You were the first that explained this perfectly. I effing get it now! The only thing I had to look up was how to get npm to install bootstrap 4.6 because the site was originally created with ver. 4 and was afraid weird things might happen or not work with v5. Thanks man!!!
Aha, thanks for the support, glad it helped! :)
Thank you so much, this helps me a lot, thanks once again.
Fantastic, my friend. Many thanks indeed !!
Very neat tutorial, thanks!
Anyone else not seeing the same settings in there settings.json file? What is the default and what did he change?
😉🎊🎊🎊🎊🎊🎊🎊 thanks Shaun
(Btw are u doing any livestreams? )
does this also work with Templated Bootsrap? the one that are Free? and should i use this method with the same Bootstrap Version?,
in my case im trying to use this 1 template with Different Version of Bootstrap, its like 4.0 something and the current latest ver is around 5.2 bootstrap, also the template has alrd css folder with their own variable q.q
Just an FYI for ppl running BS 5.2+ if you are NOT including the whole boostrap lib there is a very specific order for imports to follow
@import '../lib/bootstrap/scss/functions';
@import '../lib/bootstrap/scss/variables';
@import '../lib/bootstrap/scss/maps';
@import '../lib/bootstrap/scss/mixins';
@import '../lib/bootstrap/scss/root';
if you notice certain utilities are not working i.e margins or padding is not being applied, make sure to import
@import '../lib/bootstrap/scss/bootstrap-grid';
@import '../lib/bootstrap/scss/bootstrap-utilities';
I had to write this way: $theme-colors: map-merge($map1: $custom-theme-color, $map2: $theme-colors);
Not working on Angular... default styles.scss, doing the same thing, btn-primary still blue
Hello sir, I am beginner to web development, learning javascript now. i found you have uploaded tutorials on react,graphql,gatsby. in which order I should watch this playlists? react then graphql finally gatsby? please guide me sir
This is a great course, but in my case the main.min.css contains only: --bs-altdark: #color; but no e.g. bg-altdark oder text-altdark. Don't no why?
Well Explained! Thank-You So Much 😁
You're very welcome 😊
You explain things so well..........Thanks.
Thanks Steve!
@@NetNinja how did you import here 5:13
Very helpful, thanks!
Hi there, i'm having the same issue as some of the other people here. The code doesn't change backgrounds when i write "bg-altdark" or "bg-altlight", i've watched the video a few times to see if i'm making any mistakes but i've written everything like you did, it works on buttons, but not on backgrounds or icons, any idea why is this and what should we do to fix it? Thanks!
I had the same issue, i tried this and it worked, there's probably a better way to do it though but i dont know (paste this in the sass file after you merged the theme colors with your custom ones)
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge(
$theme-colors-rgb,
(
"black": to-rgb($black),
"white": to-rgb($white),
"body": to-rgb($body-color)
)
);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
@@vali8924 how did you find the solution to this problem? I would like to read the source, and by the way it helped me thanks to you
Hey shaun, How can i use @use instead of @import?
Excellent tutorial! Thanks
Please make tutorial on crud operation with rtk createAsyncThunk and rtk-query. That will be very much helpful for lots of developer.
Is there any easy way to change the @import to @use? Or some other method? Apparently import is deprecated, or will be eventually.
Hello, everyone. I'm stuck here. It won't create the css folder after installing the live sass compiler. Anybody else have this problem?
Im searching for mongo db realm for react native tutorials, but none found good. Can you do it?
Need a roadmap video to follow your channel content
I wish I had found this video sooner.
Thanks really helpful video.
Glad it was helpful!
Using this method, how do I add the bootstrap javascripts on my working files?
Anyone have issues with the offcanvas not working when using local bootstrap, when i use cdn it works fine but as soon as I changed to local bootstrap its not working properly. Can you pls help, thanks
Same with me.
same here man
did you guys get any solution ?? pls le me know @Ghelibe
i got the solution . I created a new project and from the get go i used and installed bootstrap locally and the issue got fixed . I think the problem was that in the head section u have to replace script tag in the bottom with the new one like this ---- . The problem got fixed just like that .
i have got a big problem. i was using the cdn links like you did in this video, but after downloading the bundle, the image still doesn't show up when the internet is off. Same goes with the icons, they seldom showup. Anybody having any idea what to do other than using cdn?
Thank you man for this course, it is great! BUT.... ok, i have watched all vides from here, but i still don't get why people use Bootstrap instead of normal CSS. Everything is much more easier and clearer than Bootstrap code, specially if you want everything with your own colors and custom things!
People want to avoid reinventing the wheel. Bootstrap gives them a solid UI design base that follows the mobile-first approach. And in earlier days, you had to strongly consider browser-specific differences in CSS support, where Bootstrap took a lot off your plate.
@@BJKG5b Yes true. Even same goes for defining layouts.
Can you please explain more ... Because i see that bootstrap make things easy and faster ,
I did not get how you import in main.scss 5:04
Exactly
I am confused why not just make an override.css and add it after the bootstrap injection code? This is way too complicated for such small changes.
Have you tried it?
sir i don,t get the fiel that you have included in html link "css/main.min.css" how can i get this file tell me please
You're really great pal
Thanks Ninette!
Sir please do video about carousel in the BS5
Nice video. But If bootstrap is installed via nmp ... how to make the navigation bar or carousel slider functional. What should I import, where, and how?
Im not sure but i think you should link the js file to the html
@@eyriusbacterius i linked...thanks :)
After doing this, somehow, the offcanvas doesn't wanna work.
why the bg-altdark doesn't work for me? I did everything as explained
Thanks a lot mate. ❤
How do you manage and compile Sass on live web server/hosting?
My setting.json file shows something completely different. Idk what to do now
very useful , thanks 🌷
I have to to restart front end in each time update the sass files, does anyone why is that?
cannot we automate that?
Thanks, But how can I custom directions ? rtl ?
Awesome content
You are the best.
How to add custom color for button :hover style similar method ?
the SASS tutorials are quite old, any updates ???