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.
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 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!
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!
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.
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.
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 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 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.
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 :)
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
What're the advantages/disadvantages of the different installation setups? I'm just starting my web developing journey,so I'm unsure which method I should use :')
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 👍
I have low internet connection so, I cant watch your videos on high settings. Can you make upcoming videos texts more bigger. It is a request. By the thank you for your tutorial 😀😀.
I was trying to figure it out how you wrap, with a shortcut, the tag's attributes one below the other, vertically, and I can't haha, somebody knows? It will be very useful. Thank you so much! Great video!
Hi, the tutorial is great but you screen and font is so small. It is hard to see the screen. I strongly advice that whenever you do tutorial its good to think how the viewer comfort and the purpose is for the viewer to see the screen clearly.
Thank you for the tutorial, its awesome. I have a question though, I didnt quite get it, what is it that you are using that helps you formulate the html quicker, it was something called AMA? I couldnt hear it that well.
@@orangemoonglows2692 I went through every screen and there was no CSS or SASS anywhere. The video is basically showing examples of using Bootstrap classes like the Bootstrap docs does.
Tutorial is awesome but zoom level is worst. Please keep in mind that crash courses are to refresh concepts without opening code in VS. So increase zoom level.
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 👑
😎👍
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.
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 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!
I Really recommend this video for any beginners. The explanation and the clearance of the content is perfect...!
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!
Man! This course came out right when I needed it.
That's great to hear! We hope this tutorial is helpful to 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.
Now that's what I call Bootstrap. I'm strapping on my boots and I'm ready to hike the path of web development.
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
This man is good he just made bootstraps look easy, I really appreciate what you did man.
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.
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
Three things are necessary for humanity. Health, freedom, and time. Effective use of time. Good Job.
This tutorial makes it sooooo much easier to use bootstrap! Great Work
Agreed!
I really got a lot of idea from this awesome tutorial.
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
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
Here I spent more than 2 weeks to learn bootstrap and here this guy taught it in just 3 hours 😢
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.
best tutorial for beginners to get started but also know all the stuff that exists in bootstrap
He has included everything he could
Thanks for very elaborative tutorial. As a first-timer, I gained a lot of knowledge regarding Bootstrap.
Thank u so much, explaining so clearly in each way, easily understood. Keep the good work up !!!
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 :)
Thank you sooo much. Such a good video and tutorial. I love your teaching style. So easy to understand and do. Thank you!
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
Excellent video and I'm very thankful to all of you.
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💯💯👍
it is a great tutorial for beginner thanks code camp
Absolutely incredible tutorial, so much better than the one I got in university that I'm paying nearly £5k a year for
Best Tutorial for Beginners. I highly recommend it to anyone who wants to learn Bootstrap. This is the real Gem♥♥♥
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.
Awesome breakdown!! Can you please show how to make a column that spans multiple rows in Bootstrap? So more height in the column
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
Thank you very much FCC for bringing so much material constantly
This has been super helpful, thank you. I was having trouble understanding the documentation.
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
Would love a future tailwind tutorial!
Tailwind with next js😁
I like they idea too!!!
++
Setting
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!
Thanks for the tutorial it helped me learn Bootstrap real quick. Big up man! Keep up the nice work
Crash course tutorial is good, but font are little bit low that's why having difficulty to view the code in video.
Лучший туториал из всех, что мне попадались!
Great tutorial for beginners! you explained all the concepts very clearly. Thanks!
I loved the flow and all the things were summed up to be simply perfect ... Thank you very much
Great tutorial, thank you so much for your explanations and for sharing your knowledge
this guy looks like tom hardy .great tutorial by the way
What're the advantages/disadvantages of the different installation setups? I'm just starting my web developing journey,so I'm unsure which method I should use :')
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 👍
Great tutorial, now I can proudly add bootstrap to my portfolio
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
you guys are the best. thank you!
I am arabian man I can understand you because you talk slowly❤
Great tutorial, Your explanation was wonderful.
This one is so nice! I hope there is one where you can teach with an example project!
Thank you so much! Great intructor, explained all the concepts very clearly. Definitely going to be using bootstrap in future projects!
I have low internet connection so, I cant watch your videos on high settings. Can you make upcoming videos texts more bigger. It is a request. By the thank you for your tutorial 😀😀.
You read my thoughts!
Almost like some kind of superhero 😅😂
Boostrap is a really great technology thanks for fcc team ❤❤
2:04:59 mic improvement jumpscare hehe, thanks for the tutorial!
Very much thanks buddy for free of cost teaching you help me alot
Thank you so much for the tutorial. It was really helpful for a beginner
Not going to repeat all the compliments, but still : Awesome stuff!
Best video on the internet about bootstrap! Just get rid of filler words. It started to annoy me little bit.
Best tutorial ever ...but cause of word repating I was quite jumbled....
Thanks so much for this tutorial
Hey there. Why didn't you mention boostrap's extension that is available for VSCode?
this is the best timing in my life
I love this channel so much
Just want to start leaning it
Do you think this is perfect place I can learn bootstrap
Yeah just finished
Best understable coding channel forever. 😎😍
I was trying to figure it out how you wrap, with a shortcut, the tag's attributes one below the other, vertically, and I can't haha, somebody knows? It will be very useful.
Thank you so much!
Great video!
Great tutotrial
Appreciated by teaching style ! Keep it up . 👍
I have completed HTML ans CSS and done few projects. Should I have some ideas before starting bootstrap? Or directly get into it?
Go for it.
Very well explained. Thank you so much!
Hi, the tutorial is great but you screen and font is so small. It is hard to see the screen. I strongly advice that whenever you do tutorial its good to think how the viewer comfort and the purpose is for the viewer to see the screen clearly.
Wow, I was literally just googling bootstrap components when this dropped. Crazy good timing!
same bro
thank You very much for a great lecture
Thank you for the tutorial, its awesome. I have a question though, I didnt quite get it, what is it that you are using that helps you formulate the html quicker, it was something called AMA? I couldnt hear it that well.
I'm looking for this tool too, is it AMA?
You are saver i was just thinking of doing bootstrap
I'm glad you found this video useful 😁
I needed this, thanks!
Been waiting for this!!
I would love to see a bootstrap studio tutorial
Now we talking with Bootstrap Studio tutorial
Unfortunately, this doesn't seem to cover how to make your own CSS customizations to Bootstrap which is usually a requirement in the real world.
did you go through the entire 2+ hours? what makes you say this?
@@orangemoonglows2692 I went through every screen and there was no CSS or SASS anywhere. The video is basically showing examples of using Bootstrap classes like the Bootstrap docs does.
Very helpful tutorial thank you
great tutorial, thanks
thank you for making this video ❤❤❤❤💕💕💕💕💕💕 very helpful
great tutorial! Wish you could have spoke more clearly in some areas, looking at the subtitle and the code isn't very user friendly.
Tutorial is awesome but zoom level is worst.
Please keep in mind that crash courses are to refresh concepts without opening code in VS.
So increase zoom level.
How do you get the text to auto-format/beautify/indent when pasting html etc? Your code just jumps in place
Thank you very much, this was useful.
Let's go. Going to use this to rapidly prototype some Web3 ideas. Thank you!
very great tutorial
What an excellent tutorial. Thank you MDB!
Nice course. Thank you so much.
35:10 Shouldn't gutter gx increase the gap between columns??? It doesn't seems to be working the way it should.
Copy paste from the official documentation is considered a course now?