I used to think that copying code snippets from bootstrap's website would build some guilt in me but after seeing this I've learnt that it's not a bad thing to do as long as you understand what that particular line does.
Thank you for such a wonderful tutorial from scratch for beginners. He goes over the entire thing, shows you many tricks and teaches how to apply your own touch to whatever you're doing. If any need, simply pause, process, practice and play with things yourself before continuing.
This is the best tutorial for beginners! and the fact that you go over the documentation makes it so much better and easy to continue learning on our own. Thank you so much!
Thank you so much - for the first time I get the whole concept of bootstrap. And you guide us perfectly through the whole process. That was more than worth it to become a supporter!
0:00 Popper js is needed to make popups 19:39 Breakpoints set the width for containers in different devices, inside these, rows and columns go 27:11 You can set different width for a column than its siblings with breaking points 30:08 Mix and match colsizes in the same class div so that they work in different cases and make a flexible website 32:52 Rows can be aligned Gutters can be used for spacing 40:35 Buttons and elements can be resized depending on specific and similar class names 40:47 Buttons can also have a "disabled" status in which they arent active until a condition happens (boolean) 52:22 Cards, which can display items, can be grouped using card groups (alternative to setting cols of the same size) 1:14:20 Images can be made responsive with "img-fluid" so that they scale with the parent div 1:23:17 Coloring for text 1:32:11 There are also utility classes with Flexbox 1:41:08 Tables can be made with , table headings with and table data elements with
Seems like the sections on "download local installation" vs "download from CDN" vs "install via npm" could use some elaboration on when/why you would want to use one approach vs another. In some of these methods, you will pay for the outbound traffic when serving these files (would most newbie devs know which ones?). If your website is popular, that could be millions of servings a day.
CDN is the good choice. Firstly it will save the bandwidth And secondly there's high chances that your visitor have bootstrap downloaded and cached (because many sites use it)... So that will make site load faster
@@jitxhere Yep, for applications/websites served on the internet, I 100% agree with this. One reason you might want to serve the CSS/JS files yourself is when you have an application/website running on a local network (corporate intranet, home network, etc.), where you don't want to rely on internet access (or some other network that simply can not see the internet). Otherwise, I think CDN is the wisest option.
Thank you very much for this tutorial. It's so easy because every class has the same pattern. For someone who can't understand this tutorial, I suggest playing with it by exploring their docs by yourself before going to the next step.
It's a good tutorial if you're already familiar with Bootstrap and want to expand your knowledge. For a newbie, it's not. He skips a lot of parts, copy+paste(I'm not saying it's bad but at least tell me what you do) a lot and sometimes doesn't even say where he copied from. The screen size is too small, so you can't follow. Besides, he doesn't talk much when he codes. Hence, you can't code with him side by side. Because unless you look at his code, you don't know what's he doing. Again, I appreciate the effort but then please don't put "for beginners" on the title, because it's clearly not.
Absolutely true. Within 8 minutes of watching tutorial, I was also surprising the way of teaching and presenting the material. Then I started to look the comment and found this comment exactly matching my feeling toward this course. I also think it is not for beginners.
I'm getting back into web programming after 20+ years away. This video is very eye opening and I have certainly learned a lot in these 3 hours! VSC, Emmet, Bootstrap... very enlightening! That said, this bootstrap thing is interesting but... I'm not sold. There is an awful lot of extra work for what seems to be added limits. I have to learn how to use SASS in order to customize BS which is a limit on css? Why not just learn css and make it work? Is the only benefit to BS found in the flexible containers? Certainly Bootstrap is not the only way to program cross device flex. In BS, some of the more simple tasks, like keeping an A tag link from turning blue, are not so easy to accomplish when compared to a simple style or css application. For the life of me, I can't figure out how to do this in BS. I tried playing with the navbars, but really don't like the rigid and very limited aesthetics. I prefer the ability to use links because they offer much greater flexibility, but in BS, I can't figure out how to apply a style that keeps that god awful blue link from showing up during hover.
You can use another additional css file or files in addition to the bootstrap css file to customize the stuff that is hard to customize using bootstrap
What did you end up using? I think that Bootstrap's main sell point is that ease of making responsive elements. Using 4 different @media tags would be horrible.
For some reasons I was struggling so much with Bootstraps, and your tutorial really helped me understand how it works. Thank you for going through the major points !
hi there! I'm still stuck on css and don't know what to do, like I've lost my motivation this days..watching to this tutorials don't help me sometimes when it comes to code i don't remember anything, bootstrap can do anything for this, or? can u help to solve this issue please? I would be happy :)
I don't know what's wrong with some people here nagging. If you are a real software engineer you can pay a very close attention to all the details to find your answer . He is not required to say the details because it's time_consuming . And you all know the basics about html,css and java script what's more, he doesn't need to reduce his speed nor mentioning all the details . I love this tutorial, unlike other tutorials this one was perfect because it wasn't about creating a project, it was about learning the elements of bootstrap, I think building a project is also a waste of time just learning matters . Thank you my friend hope i see more work of you
Thank you very much for this very detailed explanation! I think, now i understand, how to use bootstrap. Will try it out and comment again, as soon as i got results 👍
With regards to the col, I think because it’s named in the class as col when you change it in the style you don’t get the necessary results you ought to, please recheck the Grid system
![The Complete Web Development Roadmap [2024]](http://i.ytimg.com/vi/GxmfcnU3feo/mqdefault.jpg)
![เปิดคำทำนาย นอสตราดามุส - บาบา วานก้า ปี 2025 คนทั่วโลกต้องเจออะไรบ้าง? | แฉ 11 ธ.ค. 67 [2/3] |GMM25](http://i.ytimg.com/vi/xmTIKWJUMPM/mqdefault.jpg)
![ค้าง (STILL) - GEMINI [ OFFICIAL MV ]](http://i.ytimg.com/vi/Ftxx3hk5vkU/mqdefault.jpg)
Very great tutorial., thank you. See below breakdown of tutorial
What is bootstrap (0:00 - 4:30)
Installation/setup (4:30 - 14:56)
Bootstrap grid (14:56 - 37:31)
Bootstrap components discussed are
- buttons (37:31 - 42:38)
- cards (42:38 - 57:53)
- typography (57:53 - 1:12:37)
- responsive images (1:12:37 - 1:18:25)
- utilities (1:18:25 - 1:37:52)
- tables (1:37:52 - 1:41:44)
- alerts (1:41:44 - 1:50:08)
- navs and navbars (1:50:08 - 2:04:58)
- icons (2:04:58 - 2:09:14)
- forms (2:09:14 - 2:20:54)
- other components (2:20:54 - 2:30:30)
Let's build a webpage (2:30:30 - 2:46:21)
Thanks again Codecademy.
Goodluck everybody
ok
U dropped this 👑
😎👍
I used to think that copying code snippets from bootstrap's website would build some guilt in me but after seeing this I've learnt that it's not a bad thing to do as long as you understand what that particular line does.
Thank you for such a wonderful tutorial from scratch for beginners. He goes over the entire thing, shows you many tricks and teaches how to apply your own touch to whatever you're doing. If any need, simply pause, process, practice and play with things yourself before continuing.
This is the best tutorial for beginners! and the fact that you go over the documentation makes it so much better and easy to continue learning on our own. Thank you so much!
Three things are necessary for humanity. Health, freedom, and time. Effective use of time. Good Job.
I Really recommend this video for any beginners. The explanation and the clearance of the content is perfect...!
Thank you so much - for the first time I get the whole concept of bootstrap. And you guide us perfectly through the whole process. That was more than worth it to become a supporter!
Now that's what I call Bootstrap. I'm strapping on my boots and I'm ready to hike the path of web development.
Man! This course came out right when I needed it.
That's great to hear! We hope this tutorial is helpful to you 🙂
0:00 Popper js is needed to make popups
19:39 Breakpoints set the width for containers in different devices, inside these, rows and columns go
27:11 You can set different width for a column than its siblings with breaking points
30:08 Mix and match colsizes in the same class div so that they work in different cases and make a flexible website
32:52 Rows can be aligned
Gutters can be used for spacing
40:35 Buttons and elements can be resized depending on specific and similar class names
40:47 Buttons can also have a "disabled" status in which they arent active until a condition happens (boolean)
52:22 Cards, which can display items, can be grouped using card groups (alternative to setting cols of the same size)
1:14:20 Images can be made responsive with "img-fluid" so that they scale with the parent div
1:23:17 Coloring for text
1:32:11 There are also utility classes with Flexbox
1:41:08 Tables can be made with , table headings with and table data elements with
Oh. My. God. You are a life saver, tq so much
Here I spent more than 2 weeks to learn bootstrap and here this guy taught it in just 3 hours 😢
This tutorial makes it sooooo much easier to use bootstrap! Great Work
Agreed!
This man is good he just made bootstraps look easy, I really appreciate what you did man.
this is the best tutorial on bootstrap, I have ever seen. Thanks and KUDOS!
PODA ANGUTTU JOONI
Just what I wanted
I was searching all over and this came in
Omg I was just struggling with Bootstrap and this came out 🙏🏻🌠
That's great to hear! We hope this tutorial is helpful to you 🙂
Are you a student. If so, then feel free to contact me
best tutorial for beginners to get started but also know all the stuff that exists in bootstrap
He has included everything he could
Absolutely incredible tutorial, so much better than the one I got in university that I'm paying nearly £5k a year for
Been waiting for this!!
Seems like the sections on "download local installation" vs "download from CDN" vs "install via npm" could use some elaboration on when/why you would want to use one approach vs another. In some of these methods, you will pay for the outbound traffic when serving these files (would most newbie devs know which ones?). If your website is popular, that could be millions of servings a day.
CDN is the good choice.
Firstly it will save the bandwidth
And secondly there's high chances that your visitor have bootstrap downloaded and cached (because many sites use it)... So that will make site load faster
@@jitxhere Yep, for applications/websites served on the internet, I 100% agree with this. One reason you might want to serve the CSS/JS files yourself is when you have an application/website running on a local network (corporate intranet, home network, etc.), where you don't want to rely on internet access (or some other network that simply can not see the internet). Otherwise, I think CDN is the wisest option.
Thank u so much, explaining so clearly in each way, easily understood. Keep the good work up !!!
Best understable coding channel forever. 😎😍
Would love a future tailwind tutorial!
Tailwind with next js😁
I like they idea too!!!
++
Setting
Thank you sooo much. Such a good video and tutorial. I love your teaching style. So easy to understand and do. Thank you!
Thank you very much FCC for bringing so much material constantly
Thank you very much for this tutorial. It's so easy because every class has the same pattern. For someone who can't understand this tutorial, I suggest playing with it by exploring their docs by yourself before going to the next step.
Thanks for the tutorial it helped me learn Bootstrap real quick. Big up man! Keep up the nice work
I really got a lot of idea from this awesome tutorial.
Thanks for very elaborative tutorial. As a first-timer, I gained a lot of knowledge regarding Bootstrap.
This is great, I love that you worked from the documentation and gave a really good example at the end. Found it so useful for my course! Thank you!
Wow, I was literally just googling bootstrap components when this dropped. Crazy good timing!
same bro
It's a good tutorial if you're already familiar with Bootstrap and want to expand your knowledge. For a newbie, it's not. He skips a lot of parts, copy+paste(I'm not saying it's bad but at least tell me what you do) a lot and sometimes doesn't even say where he copied from. The screen size is too small, so you can't follow. Besides, he doesn't talk much when he codes. Hence, you can't code with him side by side. Because unless you look at his code, you don't know what's he doing. Again, I appreciate the effort but then please don't put "for beginners" on the title, because it's clearly not.
true i thought the same i mean the first 20 minutes was okay and then falling completly off by just going around with what you already said
Absolutely true. Within 8 minutes of watching tutorial, I was also surprising the way of teaching and presenting the material. Then I started to look the comment and found this comment exactly matching my feeling toward this course. I also think it is not for beginners.
This had to be said!
You could not have said it any better! He's teaching is not good. Of course he knows the material, but the teaching is pretty bad.
Very true,the screen size is too small like i can't follow
you guys are the best. thank you!
Лучший туториал из всех, что мне попадались!
I'm getting back into web programming after 20+ years away. This video is very eye opening and I have certainly learned a lot in these 3 hours! VSC, Emmet, Bootstrap... very enlightening!
That said, this bootstrap thing is interesting but... I'm not sold. There is an awful lot of extra work for what seems to be added limits. I have to learn how to use SASS in order to customize BS which is a limit on css?
Why not just learn css and make it work?
Is the only benefit to BS found in the flexible containers? Certainly Bootstrap is not the only way to program cross device flex.
In BS, some of the more simple tasks, like keeping an A tag link from turning blue, are not so easy to accomplish when compared to a simple style or css application. For the life of me, I can't figure out how to do this in BS.
I tried playing with the navbars, but really don't like the rigid and very limited aesthetics.
I prefer the ability to use links because they offer much greater flexibility, but in BS, I can't figure out how to apply a style that keeps that god awful blue link from showing up during hover.
should try tailwind css
You can use another additional css file or files in addition to the bootstrap css file to customize the stuff that is hard to customize using bootstrap
What did you end up using?
I think that Bootstrap's main sell point is that ease of making responsive elements. Using 4 different @media tags would be horrible.
For some reasons I was struggling so much with Bootstraps, and your tutorial really helped me understand how it works. Thank you for going through the major points !
hi there! I'm still stuck on css and don't know what to do, like I've lost my motivation this days..watching to this tutorials don't help me sometimes when it comes to code i don't remember anything, bootstrap can do anything for this, or? can u help to solve this issue please? I would be happy :)
Excellent video and I'm very thankful to all of you.
Thank you for this tutorial. It’s so comprehensive and beginner friendly.
For me it's a bit to fast as i am a beginner to catch up what his doing
This is the best tutorial ever it really helped me understand Bootstrap in a matter of hours, keep up the good work. I love it💯💯👍
very nice , wir need more videos
this is the best timing in my life
Thanks!
it is a great tutorial for beginner thanks code camp
Great tutorial for beginners! you explained all the concepts very clearly. Thanks!
I love how he explains something basic like opening console but not the kb shortcut he used to get the live server
Alt b + alt b use this short cut..
Does it work bro?
I meant in general this tutorial is meant for beginners but it ignores some things that aren't basic.
thanks so much dude. you made bootstrap easy for upcoming web developers.
Best Tutorial for Beginners. I highly recommend it to anyone who wants to learn Bootstrap. This is the real Gem♥♥♥
Great tutorial, thank you so much for your explanations and for sharing your knowledge
Amazing tutorial! Thanks
Thank you so much! Great intructor, explained all the concepts very clearly. Definitely going to be using bootstrap in future projects!
I needed this, thanks!
Most waited video, you guys are doing great💯💯
Thank you sooo much. Such a good video and tutorial.
2:04:59 mic improvement jumpscare hehe, thanks for the tutorial!
Let's go. Going to use this to rapidly prototype some Web3 ideas. Thank you!
You read my thoughts!
Almost like some kind of superhero 😅😂
this guy looks like tom hardy .great tutorial by the way
What an excellent tutorial. Thank you MDB!
Great tutorial, now I can proudly add bootstrap to my portfolio
Great tutorial, Your explanation was wonderful.
This has been super helpful, thank you. I was having trouble understanding the documentation.
I love this channel so much
Amazing course. It's mind blowing what I can do with Bootstrap now
Would be cool if it had some excercises to go along with it
Not going to repeat all the compliments, but still : Awesome stuff!
I am arabian man I can understand you because you talk slowly❤
I loved the flow and all the things were summed up to be simply perfect ... Thank you very much
Appreciated by teaching style ! Keep it up . 👍
I don't know what's wrong with some people here nagging. If you are a real software engineer you can pay a very close attention to all the details to find your answer . He is not required to say the details because it's time_consuming . And you all know the basics about html,css and java script what's more, he doesn't need to reduce his speed nor mentioning all the details . I love this tutorial, unlike other tutorials this one was perfect because it wasn't about creating a project, it was about learning the elements of bootstrap, I think building a project is also a waste of time just learning matters . Thank you my friend hope i see more work of you
-20:00 minutes ✅
-40:00 minutes ✅
-1:06:00 minutes ✅
-1:12:00 minutes ✅
-30:00 minutes
For everyone wants to answer me:
So it's better using col-md-8 with (md) instead of col-8 for example? Because its responsive?
At 40:20 I didn't get what's mean ''my-5'' in the ''container'' as ''container my-5'' someone can help me?
-45:00 ✅
During chapter ''Cards'' I do a little confusion with 'row' and 'col' and the cards inside them.
At about 1:01:42 I didn't get the difference between ''Real headings'' and ''Paragraphs looking like headings''
Very well explained. Thank you so much!
Boostrap is a really great technology thanks for fcc team ❤❤
Super thorough! thanks.
Thank you so much for the tutorial. It was really helpful for a beginner
Was waiting for this , thanks thanks a lot many thanks
Thanks so much for this tutorial
Really well explained. Thanks
Thank you very much for this very detailed explanation!
I think, now i understand, how to use bootstrap. Will try it out and comment again, as soon as i got results 👍
Very much thanks buddy for free of cost teaching you help me alot
Nice work
Thanks, that means a lot :)
This one is so nice! I hope there is one where you can teach with an example project!
Nice course. Thank you so much.
thxs a lot guys!! you are a wonder!!!
Amazing class!
Awesome breakdown!! Can you please show how to make a column that spans multiple rows in Bootstrap? So more height in the column
Bootstrap is so easy if you really know css😁
thank you for making this video ❤❤❤❤💕💕💕💕💕💕 very helpful
35:10 Shouldn't gutter gx increase the gap between columns??? It doesn't seems to be working the way it should.
Very helpful tutorial thank you
This was an impactful tutorial and was worth every second of my time!
Best video on the internet about bootstrap! Just get rid of filler words. It started to annoy me little bit.
I thought the CSS 11hours-guy was the worse teacher I'd ever come across... then I clicked on this guy. Wow.
thank You very much for a great lecture
Really loved it😍
Thank you very much, this was useful.
Thanks for your job!
Awesome 👏🏽 tutorial thanks 🙏🏽
With regards to the col, I think because it’s named in the class as col when you change it in the style you don’t get the necessary results you ought to, please recheck the Grid system
great tutorial, thanks
Best tutorial ever ...but cause of word repating I was quite jumbled....