Bootstrap 5 Crash Course Tutorial #19 - Customizing Bootstrap 

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

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.

This is an excellent tutorial. It is concise and just what I was looking for to turn on negative margins in Bootstrap! Thanks!

I have been trying to work out how to compile css and sass for a few days now, this video smashed it, lifesaver!!

Great video. I got exactly what I needed by halfway through. Thanks!

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!

Great and simple video, really opened my eyes up to the power of SCSS and bootstrap 5 👍

ty Shaun, I've been waiting for this lesson! So now we are true bootstrap ninjas 🐱‍👤🐱‍👤🐱‍👤

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 job man! finally someone clear and easy explained that issue to me!

Been struggling for days on how to customize bootstrap but you are a life saver Thanks a lot 🎉

You are gold, explained it as clear as Crystal

Ninja I learned so much from you over the years, thank you

Thanks, Buddy. This is what, I was looking for today.

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!

Got up at 3 am to wait for and watch new episode from Net Ninja!

Amazing, spent 2 days and didnt know how to do this. Thank you

Excellent tutorial! Thanks

Fantastic, my friend. Many thanks indeed !!

You help me save a lot of time. Thanks dude. I subbed

At last after so many videos I got the correct video, and got clarity on customizing bootstrap themes, Thank you

Very neat tutorial, thanks!

Thank you so much, this helps me a lot, thanks once again.

Very helpful, thanks!

Such a helpful, well-explained tutorial. Thank you!!

thanks for this brilliant tutorial, Sass is the easiest and the most useful tool for customizing bootsrap

Look at that, I had to skip to the 19th video to find what I needed, very efficient AND practical.

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!

This was rather an excellent tutorial--thank you, siree!

very useful , thanks 🌷

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.

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!

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!

Thank you very much. Really informative and useful.

Awesome. Solved my Bootstrap Vue problems.

This is a goldmine. You got a subscription.

Thanks a lot mate. ❤

Would be grateful if you do another video continuing bootstrap for admin portal with dashboard and forms.

Well Explained! Thank-You So Much 😁

Awesome content

thanks man, very helpful

Thanks a lot, this video was very helpful.

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!!!

Thanks really helpful video.

Great content Thanks!. Can you use Node JS in ASP.NET project?

thank you so much!!!

Where have you been all my life! Xd I love you

omg thank you!

Have just found your Tutorial, thank you. I a wondering have you done a similar tutorial using VS2022 IDE rather than VS Code? Thanks

😉🎊🎊🎊🎊🎊🎊🎊 thanks Shaun (Btw are u doing any livestreams? )

You're really great pal

thanks a lot brother !

thank you bro

thanks very helful

You are the best.

You explain things so well..........Thanks.

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?

Thank you

Please make tutorial on crud operation with rtk createAsyncThunk and rtk-query. That will be very much helpful for lots of developer.

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

thank you

Dziękujemy.

My neighbors listen to this everyday. It's not like they have a choice. 😁 #GreatTutorials

Thanks

Thank you thank you

Thank you so much! but I have no idea why map-merge function doesn't work 😢

Thanks!

Im searching for mongo db realm for react native tutorials, but none found good. Can you do it?

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!

Very job...

Hey shaun, How can i use @use instead of @import?

Is there any easy way to change the @import to @use? Or some other method? Apparently import is deprecated, or will be eventually.

Sir please do video about carousel in the BS5

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.

Anyone else not seeing the same settings in there settings.json file? What is the default and what did he change?

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

genius!

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

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?

can i change the value of user defined variable in bootstrap?

How do you manage and compile Sass on live web server/hosting?

This one is best.Wondering how to use custom colors. But how to use custom font

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?

Using this method, how do I add the bootstrap javascripts on my working files?

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?

Not working on Angular... default styles.scss, doing the same thing, btn-primary still blue

god job

How to add custom color for button :hover style similar method ?

thanks

Thanks, But how can I custom directions ? rtl ?

How did you do the first import of the video

How long is the series gonna be?

can any on help me in sass integration iam not able to change the color plz help me out

Any changes in bs4 and bs5?

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

Mine isn't compiling into one file.. many files are being compiles in my css folder after watching the scss file?

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

where can I change the number of columns in the grid?

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