Bootstrap 5 Crash Course

Bootstrap is one of the most widely used CSS frameworks, but it can be quite complex to learn since there are so many features in Bootstrap. In this video I will be breaking down everything you need to know about Bootstrap by covering the entire grid system, 6 popular components, and 6 categories of utility classes.
📚 Materials/References:
Breakpoint CSS: gist.github.com/WebDevSimplif...
Bootstrap Getting Started Documentation: getbootstrap.com/docs
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:00:35 - Setup
00:02:00 - Containers & Breakpoint Basics
00:05:37 - Columns
00:14:06 - Rows
00:17:36 - Tables
00:22:46 - Form Basics
00:28:11 - Input Groups
00:30:52 - Floating Labels
00:32:25 - Form Validation
00:36:05 - Buttons
00:40:28 - Alerts
00:42:36 - Cards
00:46:35 - Modals
00:52:00 - Collapse
00:54:20 - Navbars
01:00:20 - Color Utilities
01:03:00 - Stack Utilities
01:04:13 - Border Utilities
01:06:13 - Display Utilities
01:07:12 - Spacing Utilities
01:08:36 - Flexbox Utilities
#Bootstrap #WDS #Bootstrap5

[@kuyatomi]

Audio problems aside, this is the perfect bootstrap crash course! Thanks as always Web Dev Simplified!

[@williamdunn5081]

Awesome overview. All the info you need and no filler. Love it. Thanks for taking the time.

[@user-tm7di2fk3o]

First time to ur channel and am hooked . No time wasting, always to the point. No BS. Great job.

[@cusematt23]

This is the perfect bootstrap tutorial for absolute beginners. I searched far and wide to find a tutorial like this that pre-supposed pretty much 0 knowledge about bootstrap. Well done mate.

[@hreczkules]

Dude, you are the best guy out there for coding lessons. I am in the middle of a frontend course and you are expending my knowledge so much more! You simply know how to prepare a good and accessible videos, so thank you very much for all the effort, it's really awesome.

[@azeemadil4105]

Absolutely amazing & phenomenal timings I just started learning BOOTSTRAP 5! & You just dropped dis ..... IMO best way to learn CSS framework is from king itself! Very much appreciated!

[@DiegoSita]

I like how your new videos usually come out exactly when I need them

[@pinpon163]

I am convinced you are viewing my search history lol. This is like the 4th time I am looking for something, and Kyle answers within 48 hours with a vid lol. Love you man!

[@vaisakhkm783]

🤣 that same thing happened for me for many other youtubes lol i was going to choose a toolkit for a (my first) production single page tool, suddenly he uploaded this :)... guess i am gonna use bootstrap

[@pauldenlinger6009]

Thank you for making the best conceptual introduction to Bootstrap and how it works! I will refer to it a lot in the future!

[@buttonmedia9352]

Thank you. Amazing. Simple enough, to the point, well understandable examples and clear spoken word. 👌

[@onr5196]

the explanations and examples you showed made me just fully understand how bootstrap works in just 1 video. thanks man

[@sarveshm6779]

This is the first ever tutorial KZbin video that i am downloading; the best tutorial ever, on bootstrap; hands down; just wished it came out 5 yrs ago.

[@abhishekwebdeveloper]

Please make video on Tailwind CSS.

[@Chris-zt4ol]

Just read the docs, it’s the best tutorial out there. (After the one from fireship)

[@54peace]

to learn tailwind, i think if you're just good enough at vanilla css (not a pro ) you might not gonna need a tutorial, just read the docs and do some projects then it's all gonna be good to go.

[@Chris-zt4ol]

@@54peace You definetly need a starting point on atleast what tailwind does and how to set it up. Most of the other stuff can be googled or done via intellisens, but there will be some things you won't learn unless you actually explore the docs

[@appsgames3513]

Watch code with Harry 😍

[@berthje7201]

Second thiq

[@isaacguerrero410]

Yes great video. Thanks for all the videos, the last couple have had audio issues though

[@pasej5]

From Day 1 I have never regretted subscribing to your channel. By far the best in all lectures. Thank you, Kyle.

[@story_teller4268]

awesome tutorial man, just rectify the sound issues

[@chandanpandey8831]

Concise and to the point. Great crash course, loved it!

[@iancarr3923]

The value of a concise presentation cannot be overstated. Excellent video.

[@jasongoossens]

I'm 12mins in, and it's already the best explanation of bootstrap I've seen!

[@RashidAlesgerov]

I was looking for a tutorial like this to refresh my memory and you uploaded it just in time :D Thank you for a great video. You explained major features of Bootstrap in detail. Btw, the audio was cutting during the whole video. I guess it was a mic issue. Hopefully you could fix it for the next video.

[@cryptographical4102]

You are awesome!! This a great and simple overview of bootstrap, I now feel very confident starting on my next project now that will be using it, Thanks!!!

[@amrismail7336]

man ,, you just made my day ,, i was lost trying to find sth to study bootstrap from and i was lost in all forms ,, videos that teaches nth ,,, etc

[@yassminh]

Great crash course, thank you for the clear and concise explanations!

[@RATHERMUNEER]

One of the best Crash courses that I have come across. Thanks a lot, Loved it.

[@mirkogeffken2290]

Only half-way through, but this may already qualify as the highest signal to noise video I have ever watched. Kudos!

[@denispals9471]

Man this is SOOO useful and well explained, please keep going, thanks.

[@erikm6015]

Great crash course, Thanks for taking your time to educate us 😎

[@234234234234ist]

You single-handedly carry every single one of my web projects! Thank you for your hard work!!!

[@omarjab]

Amazing video, i've used bootstrap in the past and i currently use it for my job but i started to hate it after i discovered tailwind because i find it much simpler and easier to customize, but this video made me appreciate bootstrap a lot more than before and you made me discover some things that i didn't know, thank you :D

[@Arabian_Epileptic]

Great video Kyle. The audio was cutting out in the video a lot just fyi, other than that it was great. I will be watching this many times

[@chrisqiuu]

Sir, you really made it very simple. I find CSS very difficult but after watching this today, I think I have learned a lot of stuff about CSS that I wasn't able to familiarize. Thank you! Do you have a facebook page I could follow?

[@ThinkVerse88]

Even one second not wasted This is the best video lot of content TQ 😍

[@codedjango]

Not sure why your voice is breaking in between....but anyways thanks for this awesome tutorial :)

[@yathdixit]

good video. This is kind of a video I want. I don't want someone to first explain a thing for 5 minutes then showing them slowly slowly. I am smart enough to comprehend by my own. Love this video. Subscribed for sure.! Thanks

[@Rainmakeroffire]

Excellent tutorial man! Thanks a lot, much appreciated 👊

[@JohnDoe-qw5yr]

So impressed that you can rapidly bust out so much information like this...

[@ahotman1808]

you know a week ago I was about to learn bootstrap ,I searched for a tutorial in your channel and didn't find any so I decided to learn something else . I guess I'm lucky , and TANK YOU SO MUCH

[@michaelrodriguez8954]

Thanks again; you are awesome, bro! Thanks, Kyle, for saving the day with this video; I was searching for a Bootstrap 5 course. I found them through google, but they all were paying or were about bootstrap 3 or 4 at most.

[@thevinhbui8461]

Bootstrap's documentation is kind of confusing to me, like how they combine all divs and elements together. Your tutorial just solved that, now I know why classes like card-group and button-group exist! Truly very informative, thanks!

[@AlwaysPlayer13]

I am only 13 minutes in and have learned so many useful techniques... Keep it up 👏

[@oussamahamdi6993]

Omg today i was looking for a course for bootstrap 5 and i found u right now ❤️❤️🇹🇳 Respect man🙏

[@Swingerfinger]

Thanks for the comprehensive tutorial! Can’t even recall the number of hours I spent trying to style websites without Bootstrap. Never again

[@jermwatt1]

absolutely fantastic - as usual - thanks kyle!

[@albertoiong6895]

Definitely good tutorial on bootstrap 5... I watch this video again and again...

[@mmhef]

Excellent tutorial. Well planned and executed.

[@hanesmitter1469]

Love how you give a deaf ear to the Tailwind CSS wave and make a video on bootstrap 🤝 Great video, bootstrap has always worked for me

[@bismillahka]

Phenomenal Rapid Explanation! Just Awesome !

[@Vampirat3]

Thank you Mr. Cook for a great tutorial with outstanding follow through. I will be able to learn bootstrap in a week because of it !

[@WhoamI-yz9nx]

Amazing tutorial! This is the first CSS framework I'm learning and it's blowing my mind. Things that took me like an hour to set up can be done with just appointing one style to the right element...

[@texxs01]

ALL the other frameworks are better than this one, imo. This one was just the most popular for a while.

[@Victor-Ike]

@@texxs01 Why are they better? I am trying to figure out which framework I want to learn

[@nemoelkristianalarcio3287]

smh, lol same. I regret that I spend more than 3 months learning different CSS tricks, where I could just learn bootstrap and save time.

[@texxs01]

@@nemoelkristianalarcio3287 actually this is far more complex than than technology it uses to do what it does.

[@jalalle1995]

People who say that Bootstrap is dead and we should switch to other alternatives (tailwind), can't see that a lot of the time the dev is actually maintaining an already existing App, where the technologies are already picked up long ago and some of them might be really old, and the bigger the App is the more expensive to migrate so upgrading to the newest versions of the same technology to maintain minimum level backward compatibility ends up way cheaper (ex: BS 4 -> BS 5). We don't always have the luxury of working on green field projects and choosing cutting-edge technologies. Welcome to the real world

[@e_tas_]

This is true, and for this reason don't just learn Bootstrap for the sake of it. If you're hired to work with Bootstrap pick it up, otherwise there's no point. There's a billion stuff to learn, if you are good with CSS you can pick up bootstrap in a day. Just pick up what you need for the job, people learning how to do web dev for the first time shouldn't rely on bootstrap

[@jalalle1995]

@@e_tas_ This

[@brangja4815]

I'm here for the same reason lol.

[@sourabhrajput5110]

one no video complete course of bootstrap 5.... Hats off You

[@evilwizard7931]

audio quality is awful at times, but the content quality is always 11/10. I mean you have to pay attention to the code bit anyway & that doesn't skipout from time to time, so not really a gripe lol because I'm finding it useful. I've already rewound a few times to see what classes & structure I should be aiming for. So a big Thank You from me :D

[@learninglearning2]

recently tried to learn tailwind (don't have much experience with css) it was very complicated and now i love bootstrap.

[@lucienchu9649]

Great intro and refreshment for Bootstrap.

[@stanisawburdzy8904]

Thank you for this condensed review of bootstrap technology

[@abdikhaliqmohamoud3373]

Woow!!! that's great. This is what I am waiting years from you.

[@nothingisreal6345]

Thank you for this great reference video about BS 5. I´m sure that will reach Millions of views over time.

[@AlexCernat]

Wow! Very interesting to set the content of "size debugging" div as pseudo-css content. It's way cleaner than having a bunch of divs and play with visibility (old way style). Thanks!

[@guywithakeyboard]

One thanks from my side too. I'm just glad that I came through your tutorial.

[@jackcollazo]

Excellent crash course, thank you! You gave me a good idea on how to implement the best column layout in my bootstrap 5 webpage that I've just upgraded. I was wondering how you got the Bootstrap 5 classes autocomplete in VSCode. Thanks again!

[@bbg126]

beautifully crafted.. thanks a ton!

[@bboydarknesz]

wow, the way you explain each one is really really important for us how it works! I had watched many bootstrap tutorials since B3, but yours is different. Please make it the next level, like how install it with package, customize it, scss. Because I dont wanna B die because of that T. Hate T, its hard to maintain and unreadable, but nowadays people going crazy with that because everyone use it instead B. Show them that B is the God and very flexible! Thank you

[@AirFerrari]

Very detailed vid. Thanks for the complete info.

[@yakligian]

This couldn't have come at a better time, thanks

[@humuszlako]

Thanks a lot! I've managed to fix weird gaps occuring between the rows of my grid on smaller screens. The problem was that I added more rows below each other and I realized I just had to use one single row and add all my columns inside. I could not find the solution anywhere else but your video helped me to create a perfect grid with perfect gaps for my project and it looks great on smaller screens too! 😍

[@army-and]

That's actually great, I just started to learn bootstrap too.. actually I was looking for people whom I can relate to and sort it out together if I had any problems, hiii

[@KaterynaAntoniuk]

Awesome crash course! Thank you a lot!

[@mahmoodfamily4886]

Thank you so much for this wonderful tutorial, Thanks again

[@JamesDavis-li2ph]

Awesome video - learned so much in the small amount of time

[@IroshanaRavishan]

I Really Really recommend this video for anyone who wants to refresh the knowledge of Bootstrap and CSS... Great | Simple | Excellent | Perfect Content .

[@teclote]

Outstanding, thank you.

[@shaprock9843]

Watched the whole video. Extremely educational 🚀

[@gessicaoliveira1991]

it's an amazing tutorial.. thank so much.. your way to teach is really awesome!

[@penguinxed]

Thank you sir! Great tutorial

[@varianbohling251]

Great content! Really helpful 👍🏼.

[@rpf23543]

It's so great, thank you so much. One of the best channels out there....

[@princechangani5302]

Video is really great, I will be watching this many times.

[@AmariFields]

A year late but you my friend dropped some gems in this video!

[@karnatakamasitha8809]

Thank you for this tutorial ad it really worthy to spend our time

[@pavlinapsarsky2819]

Great tutorial, thank you! 👍

[@tomytoon123]

thnks for that breakpoint css thats help a lot!

[@matthewsizemore114]

Great video! Thanks! Very informative!

[@sakthipalanisamy007]

Great video . He was straight to the point . Would recommend this for everyone 😀.

[@FallenAngelMMA]

Great tutorial! keep up the good work ! 👍

[@linc7539]

Mr. Cook, you are a great lecturer and present this comprehensive content in an accessible way. Understanding HTML, CSS and JavaScript seem to depend on sheer memorization and understanding each of their unique "logic". Not many lecturers do that well. Thanks for demystifying this topic and I look forward to your other tutorials. Definitely interested in your JavaScript course and will check that out soon. Thanks again! P.S. - Do you play electric guitar? So do I.

[@littleoddboy]

Hey man! what's going on? I want to say thank you, because your crash course is perfect! with this video, any one can learn the basics of Bootstrap and understanding that what we have in Bootstrap system. I really thank you; finally I can understand that what is row-col system in Bootstrap. Just it! thank u again ^^

[@EricMillen]

Great tutorial beyond the audio issue. I watched at .75 speed to more easily code along and wasn't sure what was related to the playback speed and what was just missing audio. Still a very helpful video though. Thanks for making it.

[@caseypries7559]

Great video! Very helpful.

[@brianbassett9722]

Dude I just joined a new company last week that requires using bootstrap 5 and I’ve been looking for videos on how to do it. Tysm

[@manvithdayam3843]

Bro you are my savior! Im going to donate to your patreon as soon as i get some money 🙏

[@olavictor6286]

Thank you for this video, it's really useful.

[@Daniel-cc5ph]

Great thanks for the intro!

[@adriatic123]

Actually a very good course on B5, thanks

[@SuperElephant]

Amazing tutorial as always! Just little concern on the breaking voices like 13:32, it happened a lot and it's kinda frustrating to extract important information when it's cut off like that..

[@classicgamer5622]

You can hit the cc and see the text looks like the missing words are in the closed caption.

[@andrewdillard5961]

I wonder why that happens..

[@SuperElephant]

@@andrewdillard5961 Probably a malfunction in the audio equipment (battery issue?)

[@atkimusic]

Kyle.exe is not working properly.

[@geografixxxx]

@@SuperElephant Probably noise canceling

[@mahmadmaqbool5038]

waiting for this 😁

[@Lucashsh]

Wow, brilliant. Thank you.

[@thedevbek]

@WebDevSimplified I am very thankful for this video. I love the way you teach and I do know that it takes so much time, but as someone who has also bought a class of yours. I am surprised that the quality of the sound is not up to par with all your other videos that I watched. I really hope you make a remake to fix this issue. I have hearing issues and I know I have missed some great value from you because of the chopped-up audio. I hope you see this as constructive input because I do love your courses and appreciate them greatly.

[@ismailboumenir3378]

Thank you so mush for the course ♥

[@hanswiriya]

awesome work! love it.

[@anlakgun406]

just when I needed it.

[@AndyNotSoSmart]

Same here great content keep it coming. Sounds like you have a gate on your mic with too high a threshold. You probably already know this and didn't want to go back and redo the video when it's still totally understandable. I don't blame you. 🤘🤘

[@serene_shepherd]

This was fantastic 👍