Bootstrap 5 Crash Course
Vložit
- čas přidán 26. 06. 2024
- 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
Audio problems aside, this is the perfect bootstrap crash course! Thanks as always Web Dev Simplified!
Awesome overview. All the info you need and no filler. Love it. Thanks for taking the time.
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.
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.
I like how your new videos usually come out exactly when I need them
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!
🤣 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
First time to ur channel and am hooked . No time wasting, always to the point. No BS. Great job.
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!
Concise and to the point. Great crash course, loved it!
The value of a concise presentation cannot be overstated. Excellent video.
Thank you. Amazing. Simple enough, to the point, well understandable examples and clear spoken word. 👌
Only half-way through, but this may already qualify as the highest signal to noise video I have ever watched. Kudos!
Thank you for making the best conceptual introduction to Bootstrap and how it works! I will refer to it a lot in the future!
awesome tutorial man, just rectify the sound issues
From Day 1 I have never regretted subscribing to your channel. By far the best in all lectures. Thank you, Kyle.
This is the first ever tutorial CZcams video that i am downloading; the best tutorial ever, on bootstrap; hands down; just wished it came out 5 yrs ago.
the explanations and examples you showed made me just fully understand how bootstrap works in just 1 video. thanks man
Yes great video. Thanks for all the videos, the last couple have had audio issues though
I'm 12mins in, and it's already the best explanation of bootstrap I've seen!
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
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
@@e_tas_ This
I'm here for the same reason lol.
Even one second not wasted
This is the best video lot of content TQ 😍
Please make video on Tailwind CSS.
Just read the docs, it’s the best tutorial out there. (After the one from fireship)
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.
@@ihateorangecat 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
Watch code with Harry 😍
Second thiq
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
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
Man this is SOOO useful and well explained, please keep going, thanks.
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.
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
Thanks for the comprehensive tutorial! Can’t even recall the number of hours I spent trying to style websites without Bootstrap. Never again
You single-handedly carry every single one of my web projects!
Thank you for your hard work!!!
So impressed that you can rapidly bust out so much information like this...
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!
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
One of the best Crash courses that I have come across. Thanks a lot, Loved it.
Great crash course, thank you for the clear and concise explanations!
absolutely fantastic - as usual - thanks kyle!
Woow!!! that's great. This is what I am waiting years from you.
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
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
Omg today i was looking for a course for bootstrap 5 and i found u right now ❤️❤️🇹🇳
Respect man🙏
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
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!!!
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! 😍
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
Not sure why your voice is breaking in between....but anyways thanks for this awesome tutorial :)
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?
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.
Phenomenal Rapid Explanation!
Just Awesome !
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
Excellent tutorial man! Thanks a lot, much appreciated 👊
Definitely good tutorial on bootstrap 5... I watch this video again and again...
recently tried to learn tailwind (don't have much experience with css) it was very complicated and now i love bootstrap.
Excellent tutorial. Well planned and executed.
This couldn't have come at a better time, thanks
I am only 13 minutes in and have learned so many useful techniques... Keep it up 👏
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!
Great crash course, Thanks for taking your time to educate us
😎
one no video complete course of bootstrap 5.... Hats off You
Thank you for this condensed review of bootstrap technology
Great intro and refreshment for Bootstrap.
Watched the whole video. Extremely educational 🚀
A year late but you my friend dropped some gems in this video!
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...
ALL the other frameworks are better than this one, imo. This one was just the most popular for a while.
@@texxs01 Why are they better? I am trying to figure out which framework I want to learn
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.
@@nemoelkristianalarcio3287 actually this is far more complex than than technology it uses to do what it does.
Awesome crash course! Thank you a lot!
beautifully crafted.. thanks a ton!
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 !
Video is really great, I will be watching this many times.
Thank you for this great reference video about BS 5. I´m sure that will reach Millions of views over time.
Awesome video - learned so much in the small amount of time
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..
You can hit the cc and see the text looks like the missing words are in the closed caption.
I wonder why that happens..
@@andrewdillard5961 Probably a malfunction in the audio equipment (battery issue?)
Kyle.exe is not working properly.
@@SuperElephant Probably noise canceling
One thanks from my side too. I'm just glad that I came through your tutorial.
I Really Really recommend this video for anyone who wants to refresh the knowledge of Bootstrap and CSS... Great | Simple | Excellent | Perfect Content .
waiting for this 😁
Very detailed vid. Thanks for the complete info.
Great video! Thanks! Very informative!
This was really informative and useful. Thank you so much!
Great video! Very helpful.
just when I needed it.
It's so great, thank you so much. One of the best channels out there....
This is incredible!
Thank you so much for this wonderful tutorial, Thanks again
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
3:08 breakpoints
hardcode a size to a breakpoint
13:06 offset
13:50 roll-cols-
15:30 gaps in the row tag
16:27 nested rows
table-active
24:50 form control
Nice course, keep it up!
Great thanks for the intro!
Actually a very good course on B5, thanks
Thank you for this video, it's really useful.
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!
Great content! Really helpful 👍🏼.
it's an amazing tutorial.. thank so much.. your way to teach is really awesome!
Outstanding, thank you.
Super helpful video. Thank you
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 ^^
Thank you sir! Great tutorial
I'm so fulfilled that I learned the basics of html and css and I can tell how bootstrap was made!
as someone who had studied parts of the old source code, i would assume that bootstrap must have looked more impressive 10 years ago when there were only jquery and less
This was fantastic 👍
Great tutorial, thank you! 👍
Great video . He was straight to the point . Would recommend this for everyone 😀.
This was absolutely excellent.
Great tutorial! keep up the good work ! 👍
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.
awesome work! love it.
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.