Bootstrap 5 tutorial - crash course for beginners in 1.5H

[@Mdbootstrap]

I hope you liked the video. If you are already here in the comment section, I invite you to let me know what other videos would you like to see in the future. Also, share any other feedback that you have on this video! I don't run ads on tutorials - the only value I get is your engagement in the MDB community. So if you would like to show your support: - Encourage more people to Keep Coding ---> Send this video to one person - Stay tuned for new content ---> Subscribe & ring the bell In the description, you will find links to some useful, free resources: 📥 Download Material Design for Bootstrap - FREE open-source UI KIT 🎓 Learn responsive web design with the latest Bootstrap 5 (full 1.5H course) 🎁 Join our mailing list & receive exclusive perks (free stuff that is normally behind a paywall) ⭐Support the creation of open-source packages with a STAR on GitHub 👪 If you have any questions - don't hesitate to ask on our Facebook group Thank you for your support!

[@NewStreamLine]

WOW! I'm 62 yo but I'd like to learn something new. I've started watching HTML & CSS KZbin series yesterday and now I've discovered this GREAT channel. I'll have to explore more since I'd like to build a few web sites based on database end. Bootstrap is really a powerful tool. Thx very much for the video.

[@Mdbootstrap]

Thank you, great to hear that! And if you like Bootstrap you will definitely love MDBootstrap. Have a look at this tutorial kzbin.info/www/bejne/nYjWZaxoeb-hnck

[@Mdbootstrap]

And if you want to play with databases and backend have a look at mdbgo.com/

[@juliushuizing1683]

Probably the best explanation of the Bootstrap5 grid system out there. Thank you man.

[@soltsdev]

I was searching for a bootstrap 5 crash course a few days but I didn't get any video. finally, I got this wonderful video.

[@ItsGareth]

I found this course extremely helpful and easier to understand compared to most courses out there . I will most certainly be using this when i create my portfolio page . Thanks again .

[@Mdbootstrap]

Glad it was helpful!

[@itsprinceyadav]

We'll definitely KEEP CODING if you continue making such nice tutorials! Love you bro!

[@pierdkk81]

Just starting new project, will use bootstrap 5 by the help of you. Thanks

[@steveag8018]

Currently learning laravel and i feel like i need to cover bootstrap functions a bit more, so i check out this video and your lecture is great. I love this. I learnt by reading official docs & your video at the same time, your lecture is quite helpful. Though this is crash course i think u should slow down your pace a bit. I think most beginners will struggle to follow your teaching.

[@lisarogers5873]

Your examples are so helpful. Thank you for this great presentation.

[@matthewbird4068]

A really nice run down. This is gonna save me hours per a site! Thanks :)

[@chrismachabee3128]

Been here before with you. I'm studying a lot of stuff now so I have to stay current with BS5. Not assuming I know because I learned some new stuff I did not know from your last BS5 video overview. Great job as usual. You guys keep up the great work.

[@dineshcuts]

Thank you for this.. Seen a lot of tutorial but they are advanced.. finally found a video to learn bootstrap as an beginner

[@Mdbootstrap]

Glad I could help!

[@SportMovesManiac]

This was a perfect introduction to the Bootstrap. Like and subscribe!

[@lwinklly]

31:14 In the example shown on screen, the code looks something like this: Column Column Column Column Column .... Is there any way to move the "col-xxl-1 col-xl-2 col-lg-3 col-md-4..." to a separate CSS file, to make it something like: Column Column Column Column Column ... .xyz { col-xxl-1 col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12 }

[@viktorsverjovciks7531]

So helpful video, was very interesting to follow and learn something new as for beginner programmer. Thank you!

[@Mdbootstrap]

Glad it was helpful!

[@josephngugi8320]

I have been avoiding bootstrap,but am here now.I have to be proficient with bootstrap.

[@shawnippensen9837]

Excellent, excellent video. Will be saving this one. Thanks!

[@Mdbootstrap]

Awesome, thank you!

[@alvarojflores]

Thank you for sharing knowledge! And Bootstrap development team for sharing their amazing tool!

[@Mdbootstrap]

Thanks for watching!

[@KiffinGish]

An excellent introduction, learned tons.

[@stachowi]

VERY GOOD video! Love your style.

[@Mdbootstrap]

Glad you enjoyed it!

[@montsevivetamblas2543]

A really good intensive course, thanks a lot!

[@praiseoyeboade5761]

Hi there, What are your thoughts on using/learning bootstrap especially as a someone who is just learning HTML and CSS?

[@DawidAdach]

Definitely should try. Sooner or later you will have to learn some libraries.

[@ajaykryadav]

this is too good. thanks

[@Mdbootstrap]

Happy to help. Keep Coding :)

[@demirbilekdeniz]

Thank you for the great video! Opening the code along you was very helpful as well!

[@atharvakanse8524]

kudos to you bro, thanks for the amazing video!

[@jessicalunelli]

Great Tutorial! Thanks :)

[@Mdbootstrap]

You're welcome!

[@nikitamonteiro7483]

You've been very helpful, thank you so much!

[@_nitinsehrawat]

Great primer for Boostrap 5.

[@mrvenom4545]

bro u should tell from where u got that second script there are some noob developers

[@hilariouscoder7203]

Yo Bro, Thats quite a lot of content Thanks mann!!

[@Mdbootstrap]

No problem!

[@zachfenton608]

This looks very interesting but I feel that kind of defeats the purpose of using a CSS cuz all the classes are writing it with an HTML and using HTML you have to put the code in and whereas in JavaScript it's all you just link it and give it a source it just seems like a little bit too much more work.

[@persmultimediadesigntutori1293]

Fine tutorial here. You said that the Jumbotron was removed. Is there an alternative?

[@Mdbootstrap]

Thanks. Yes, there are alternatives. Have a look at mdbootstrap.com/docs/standard/extended/jumbotron/

[@mrinmoysaha8349]

I am completely beginner and I don't have much knowledge in these fields. And I am eager to learn bootstrap. But I am kind of confused should I learn Bootstrap 4 or Bootstrap 5? I asked one of my friend who is already little experienced and working as a freelancer for about 6 months. And he suggests me to learn Bootstrap 4 because bootstrap 5 is still very new and most of clients wants their project to be done with Bootstrap 4. And according to him it will be quite easy to shift from Bootstrap 4 to 5 once I learn 4 completely. Now I want your suggestion. What should I learn?

[@Mdbootstrap]

Learn Bootstrap 5 :) the first alpha version was released almost 1 year ago and it’s already widely adapted, so it’s not that new. And there is no doubt v5 is the future, not v4, so I suggest you to just start with the newest version

[@mrinmoysaha8349]

@@Mdbootstrap Thanks 💜

[@akhadianathaib8215]

Thank you so much for making this great video. Happy to subscribe your amazing channel.

[@Mdbootstrap]

Thanks for the sub!

[@loge9981]

Wow! I will do my first website with bootrap, thank you! Quick Question: How can I change the border radius of buttons though? Cheers keep up the good work.

[@Mdbootstrap]

Enhance your Bootstrap with MDBootstrap and try this ;) mdbootstrap.com/docs/standard/components/buttons/#section-rounded

[@geryardmon7523]

Thank you so much, I learned a lot watching your awesome videos. Best regards

[@kunaalaenugula662]

Thank you so much for this tutorial it was eye opening!

[@farhann.813]

Very good tutorial, thank you

[@Mdbootstrap]

Glad it was helpful!

[@nyarehd]

Thank you for a great tutorial crash course.

[@Kreepykrap92]

Is this the complete course for bootstrap? Can we now design anything with bootstrap after this video? Or do we need more? Please guide

[@catshietbud]

bootstrap is massive, this is just a kick-starter guide to help wrap your head around the concept, then when you need certain features you can go to the documentation when the time comes.

[@Kreepykrap92]

@@catshietbud fair enough. Can you guide me on how will I know that at this poibt of code, I need to use custom css?

[@catshietbud]

​@@Kreepykrap92 I think the fundamentals of HTML/CSS are important first, you should have a good understanding of that then use the bootstrap library for ease of use because CSS can be a real headache.

[@hoangquangluan3290]

it's really good, thank you so much

[@Mdbootstrap]

I'm glad you like it :)

[@midzy9639]

Hello. Could you please share with me what color theme are you using in Visual Studio Code?

[@purvakaul]

Hi...great job...I am stuck at carousel...my images are not at one spot...one image finishes and then the other image starts....like one after the other....all three in three rows...could you please help me...i cant find my mistake...thank you

[@Mdbootstrap]

Thanks for letting me know about the issue. Let me move this conversation to the forum, please create a ticket here: mdbootstrap.com/support/ It's much easier to solve issues there instead of the YT comment section. You can specify your device, browser, OS and above all, you can add a code snippet if you need. Me or one of my colleagues will do our best to help you out. PS. If your ticket refers to a video, please add the timestamp of the point where the problem occurred

[@ianascencio9156]

phenomenal content thank you for this

[@AbengNewsMag]

Is Material Design a commercial arm of Bootstrap, like Automattic seems to be the profit making arm in the WordPress world?

[@Mdbootstrap]

These are two different, independent instances, but working on the same technology. Material Design for Bootstrap is also free and open source. Check it yourself at mdbootstrap.com/

[@AbengNewsMag]

@@Mdbootstrap thanks. I was a little unsure because the tutorial seems to be about plain Bootstrap but then it also seemed to be about MDBootstrap.

[@jeorane]

Your video is very good and informative, and sorry, but you said the expression "um" 169 times and "uh" 239 times (169 + 239 = 408), open the transcription and see by yourself.

[@Mdbootstrap]

Thanks for the honest feedback ;) I'll keep that in mind

[@completerandom1199]

When doing it online, it says it requires node.js and also parcel. Are node.js and parcel included in the file that you showed downloading?

[@crow-mag4827]

What's the difference between MDBootstrap and just normal Bootstrap?

[@Mdbootstrap]

MDBootstrap is a free library based on Bootstrap, which provides plenty of additional features, better design and even free hosting :)

[@AxxionMarketPlace-iu6ri]

Thank you

[@swoopsavvy7560]

Better when you mention right from the start that you are promoting your commercial version, which pro version is not open source.

[@Mdbootstrap]

I'm sorry, but what are you talking about? The entire video is about Bootstrap 5, which is completely open-source and free.

[@NathanConkey]

Thanks, man!

[@Mdbootstrap]

Glad to help!

[@adrianpabloalvarez2523]

In the beginning I see the raws and columns numbers (11223) with a white plain background. How is that you have skyblue with separations between row/column cells?

[@Mdbootstrap]

Check course files, there is a bit of CSS responsible for that

[@adrianpabloalvarez2523]

Found it thanks :) [class*="col"] { padding: 1rem; background-color: #33b5e5; border: 2px solid #fff; color: #fff; text-align: center;

[@adrianpabloalvarez2523]

And then you mentioned the css just one minute later :D

[@ahmedmaghfour1371]

Thank you very much, it's very helpful

[@Mdbootstrap]

Glad to hear that!

[@Wangstalol]

Awesome, Thank you so much :D

[@MonirKHAN-hm5wt]

I'm trying to make two columns on the mobile view with this Bootstrap 5 code Left Right But it's not working Anyone can help? UPDATE: I found the solution We need to add the class col-6. Left Right

[@LatinoGames]

This was sooooo helpful

[@MrCusui]

Thanks bro, very useful.

[@laxkarki5560]

Please explain nicely step by step slowly BS5 setup portion

[@DawidAdach]

Coud you rephrase? Which part exactly isn't clear

[@oyeyipokayodelukman6837]

GOOD DAY AM NEW HEAR I LOVE YOUR TRAINING IS VERY COOL AND UNDERSTANDABLE

[@maheshmalusare9274]

Thanks for this video it's a awesome it's very useful

[@mahmudulhasanovi5621]

Hello sir,which theme are you use in vscode.

[@Mdbootstrap]

Hi, In this video you will find a name for this theme - kzbin.info/www/bejne/nJmcaJ2la72oqJo

[@digitalelectronics7368]

Nice lecture ,got a lot.

[@Mdbootstrap]

Glad to hear that

[@Kemistree108]

thanks for the vid.

[@Mdbootstrap]

Thanks for watching!

[@SSProg]

Hi, how are you serving the web page to the address 127.0.0.1:5500/index.html ? Where is the starting server ? Thanks.

[@DawidAdach]

kzbin.info/www/bejne/nJmcaJ2la72oqJo&ab_channel=Keepcoding

[@rekhamishra982]

You're the best ❤️

[@davidsulaberidze5978]

Thank you very much

[@hiteshsuthar1097]

Thanks

[@husler7424]

what is difference between MDN Bootstrap and Bootstrap5?

[@Mdbootstrap]

Do you mean MDBootstrap? MDBootstrap greatly extends the capabilities of the standard Bootstrap and allows you to use it with new components and technologies. Check it yourself mdbootstrap.com/

[@husler7424]

@@Mdbootstrap yep, i checked it. So which one should i use?

[@Mdbootstrap]

@@husler7424 definitely you should use MDBootstrap. Bootstrap itself is great, but together with MDBootstrap it's simply the best in the world ;)

[@sylvestertweetyhunter1733]

very nice!

[@RajabNatshah]

Thank you :)

[@Mdbootstrap]

No problem 😊

[@arazmammadov9276]

Good tutorial, but low voice quality, sorry

[@buggy6129]

Appreciate this work but Ifeel like really unorganized tutorial

[@ryuga1523]

Sir , do I need to learn this course ? I have learnt your previous bootstrap 5 course.

[@Mdbootstrap]

Hello. Previous is enough, but there are few changes worth paying attention to. Have a look and evaluates it yourself :)

[@ryuga1523]

@@Mdbootstrap Thanks:)

[@dampdigits]

Thanks❤

[@aunraza3678]

To summarize the video, the first half (1) you are learning the basics to be able to learn Bootstrap 5 by yourself. The second half (2) you learning how to browse (or research) the Bootstrap 5 website to find the answers for yourself. Am I right? or it is just me? Anyway, I love your video, and I learned a lot.

[@Mdbootstrap]

No necessary as I also show how to initialize components. However in reality if we tried to cover each and every component in details vide would take 8 hours :) Therefore we are creating other dedicated videos for certain subjects like Bootstrap Grid, Navbars etc. Please check our channel for more.

[@jorrodz6360]

Thanks a lot!

[@kilianhauber.privat]

Nice👍🏼🔥

[@prepped8551]

There's a conflict at 576px according to these slides 19:35

[@user-dm5qi4nb6l]

How can I enable the code autocomplete?

[@Mdbootstrap]

kzbin.info/www/bejne/nJmcaJ2la72oqJo&ab_channel=Keepcoding

[@SohailKhan-tc8uz]

Brother please teach us Tailwind CSS as well.☺️

[@prabhakarmishra2182]

It was nice

[@aljahlnasty]

hummm nice

[@ocheichristian3531]

how do i enable the grid

[@Mdbootstrap]

What do you mean by "enable"?

[@ashrafulfuad2967]

poor sound quality

[@coovv685]

alerts and toads 🤣

[@shekhardhami6831]

sir create admin dashboard using bootstrap

[@Mdbootstrap]

I already did ;) kzbin.info/www/bejne/iKCUqWOwjrqqraM

[@anonymousgerman2809]

Thankyou "keep coding" sorry i don't know your name

[@chtulurr]

Those mmms sound long even on 2x speed lol

[@BINUKITTOOP]

👌👌👌👌👌 ❤️❤️❤️

[@spachishome]

for the algo

[@geoffreyreid2114]

It is for beginners yet you talk too fast and don't explain what you are doing.

[@PauloConstantino167]

ok but stop saying uuummmm all the time

[@Mdbootstrap]

I will try

[@meka3506]

@@Mdbootstrap Am I able to use the draggable application since bootstrap dropped Jquery?

[@adison2117]

tl:dr: css for lazy ppl

[@alexubokwe7933]

Poor teaching

[@razakalsharafy4708]

Thanks