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!
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.
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
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.
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.
Tutorial is informative but this tutorial is very fast. Specially the speaking like he's just talking to himself. the coding tutorial is great in beginning but get fast and worse after some time. This is not for beginners at all. Just saying
That’s fine. Teaching this for beginner would probably take few days. The point of these “crash courses” are to make your feet wet. In other words, you practice, and take what you neeed from tutorial
i suppose you are like a complete beginner to programming im general. otherwise with basic knowledge of HTML, CSS and Js this isn't v hard. although his teaching approach isn't thr greatest.
Title of video is little bit misleading. You have to know some html&css to understand this. Because bootstrap is a framework that uses html&css. Technically it is right, yeah it is great beginner course for bootstrap. But they assume like "if you gonna learn bootstrap you already know html&css and basic frontend stuff"
@@aydemironur35 it is a tutorial for someone starting out bootstrap, I don't see why people would start bootstrap without basic knowledge of css and html
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
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 👍
Ive already clicked on a 3 hour video. You can assumei I'm sold on why I should learn bootstrap. over 20 minutes describing why i should use bootstrap! Is this a tutorial or a sales pitch? Less why, more how.
@@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.
Thank you so very much for putting your time and energy into making these video’s! Your whole channel is amazing! You’ll have my support! Never give up! ❤️ +1 Subscriber! ❤️
I just wish he coded everything from scratch and explained it as he coded it instead of copying and pasting, it would have been so much more easier to understand. Nice work though, I'll give this a 3 star rating
This video is great, but I have a humble suggestion: avoid relying too heavily on shortcut keys and copying and pasting. For beginners, it's quite time-consuming to follow every single step.
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 :')
im gonna be honest, i didnt like this tutorial. I paused too many times to undestand what you do and this is not a good sign (at least for me, it might mean you didnt make the tutorial for beginners). I would love it if you could write the code yourself and explain what section does exactly instead of copy pasting and simply doing a demonstration of bootstrap (we could read the documentation and do that ourselves too)
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 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.
![JavaScript Tutorial for Beginners [JS Crash Course 2024]](/img/1.gif)
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!
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!
Three things are necessary for humanity. Health, freedom, and time. Effective use of time. Good Job.
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
This man is good he just made bootstraps look easy, I really appreciate what you did man.
Now that's what I call Bootstrap. I'm strapping on my boots and I'm ready to hike the path of web development.
best tutorial for beginners to get started but also know all the stuff that exists in bootstrap
He has included everything he could
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!
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.
I Really recommend this video for any beginners. The explanation and the clearance of the content is perfect...!
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
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.
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.
Man! This course came out right when I needed it.
That's great to hear! We hope this tutorial is helpful to you 🙂
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.
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💯💯👍
Thanks for very elaborative tutorial. As a first-timer, I gained a lot of knowledge regarding Bootstrap.
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
Best Tutorial for Beginners. I highly recommend it to anyone who wants to learn Bootstrap. This is the real Gem♥♥♥
Thank you sooo much. Such a good video and tutorial. I love your teaching style. So easy to understand and do. Thank you!
this is the best tutorial on bootstrap, I have ever seen. Thanks and KUDOS!
PODA ANGUTTU JOONI
Thank u so much, explaining so clearly in each way, easily understood. Keep the good work up !!!
Just what I wanted
I was searching all over and this came in
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!
Absolutely incredible tutorial, so much better than the one I got in university that I'm paying nearly £5k a year for
Would love a future tailwind tutorial!
Tailwind with next js😁
I like they idea too!!!
++
Setting
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
Tutorial is informative but this tutorial is very fast. Specially the speaking like he's just talking to himself. the coding tutorial is great in beginning but get fast and worse after some time. This is not for beginners at all. Just saying
That’s fine. Teaching this for beginner would probably take few days. The point of these “crash courses” are to make your feet wet.
In other words, you practice, and take what you neeed from tutorial
i suppose you are like a complete beginner to programming im general. otherwise with basic knowledge of HTML, CSS and Js this isn't v hard. although his teaching approach isn't thr greatest.
Title of video is little bit misleading. You have to know some html&css to understand this. Because bootstrap is a framework that uses html&css.
Technically it is right, yeah it is great beginner course for bootstrap. But they assume like "if you gonna learn bootstrap you already know html&css and basic frontend stuff"
@@aydemironur35 it is a tutorial for someone starting out bootstrap, I don't see why people would start bootstrap without basic knowledge of css and html
@@niklavsfreimanis6168 I guess that's a relief I was gonna start but I thought my knowledge in html css was supposed to be advanced
Thank you so much! Great intructor, explained all the concepts very clearly. Definitely going to be using bootstrap in future projects!
Thanks for the tutorial it helped me learn Bootstrap real quick. Big up man! Keep up the nice work
Great tutorial, thank you so much for your explanations and for sharing your knowledge
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 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
Would be cool if it had some excercises to go along with it
I am arabian man I can understand you because you talk slowly❤
Awesome breakdown!! Can you please show how to make a column that spans multiple rows in Bootstrap? So more height in the column
I loved the flow and all the things were summed up to be simply perfect ... Thank you very much
Thank you very much FCC for bringing so much material constantly
Been waiting for this!!
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
This one is so nice! I hope there is one where you can teach with an example project!
Wow, I was literally just googling bootstrap components when this dropped. Crazy good timing!
same bro
Crash course tutorial is good, but font are little bit low that's why having difficulty to view the code in video.
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 👍
Let's go. Going to use this to rapidly prototype some Web3 ideas. Thank you!
this guy looks like tom hardy .great tutorial by the way
Great tutorial for beginners! you explained all the concepts very clearly. Thanks!
I really got a lot of idea from this awesome tutorial.
Best video on the internet about bootstrap! Just get rid of filler words. It started to annoy me little bit.
Best understable coding channel forever. 😎😍
thanks so much dude. you made bootstrap easy for upcoming web developers.
2:04:59 mic improvement jumpscare hehe, thanks for the tutorial!
Ive already clicked on a 3 hour video. You can assumei I'm sold on why I should learn bootstrap. over 20 minutes describing why i should use bootstrap! Is this a tutorial or a sales pitch? Less why, more how.
Лучший туториал из всех, что мне попадались!
Great tutorial, now I can proudly add bootstrap to my portfolio
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.
Boostrap is a really great technology thanks for fcc team ❤❤
this is the best timing in my life
I would love to see a bootstrap studio tutorial
Now we talking with Bootstrap Studio tutorial
Thank you so much for the tutorial. It was really helpful for a beginner
Excellent video and I'm very thankful to all of you.
Amazing course. It's mind blowing what I can do with Bootstrap now
Thank you so very much for putting your time and energy into making these video’s! Your whole channel is amazing! You’ll have my support! Never give up! ❤️ +1 Subscriber! ❤️
Thank you ❤ We are happy that you appreciate the time we took to create this tutorial!
Very small text in the vs code editor , can't see the code clearly
This has been super helpful, thank you. I was having trouble understanding the documentation.
Not going to repeat all the compliments, but still : Awesome stuff!
I thought the CSS 11hours-guy was the worse teacher I'd ever come across... then I clicked on this guy. Wow.
What an excellent tutorial. Thank you MDB!
you guys are the best. thank you!
I just wish he coded everything from scratch and explained it as he coded it instead of copying and pasting, it would have been so much more easier to understand. Nice work though, I'll give this a 3 star rating
This video is great, but I have a humble suggestion: avoid relying too heavily on shortcut keys and copying and pasting. For beginners, it's quite time-consuming to follow every single step.
Very much thanks buddy for free of cost teaching you help me alot
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 :')
it is a great tutorial for beginner thanks code camp
You read my thoughts!
Almost like some kind of superhero 😅😂
Best tutorial ever ...but cause of word repating I was quite jumbled....
Very well explained. Thank you so much!
i hope you will use small screen hehe, i can't see clear the words that you're typing
I love this channel so much
i mostly study from indian youtubers because foreign accents make me sleep...but this video was exceptionally good
Nice work
Thanks, that means a lot :)
Most waited video, you guys are doing great💯💯
im gonna be honest, i didnt like this tutorial.
I paused too many times to undestand what you do and this is not a good sign (at least for me, it might mean you didnt make the tutorial for beginners).
I would love it if you could write the code yourself and explain what section does exactly instead of copy pasting and simply doing a demonstration of bootstrap
(we could read the documentation and do that ourselves too)
Was waiting for this , thanks thanks a lot many thanks
Great tutorial, Your explanation was wonderful.
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?
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.
Should I learn bootstrap first as a beginner or learn the fundamentals of CSS before jumping into bootstrap?
It’s better you learn CSS first, for better understanding of boostrap
Of course learn the css firsttttttt
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!
-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''
You are saver i was just thinking of doing bootstrap
I'm glad you found this video useful 😁
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.
Just want to start leaning it
Do you think this is perfect place I can learn bootstrap
Yeah just finished
Appreciated by teaching style ! Keep it up . 👍
@freecodecamp, please make Api development course using spring, just like python one.
I needed this, thanks!