Bootstrap 5 Grid System Tutorial

Подписаться 52 тыс.

Просмотров 219 тыс.

50% 1

Bootstrap grid is a powerful system for building mobile-first layouts. It's a very extensive tool with a great number of options.
Follow me for more: / dawidadach
Learn more about the newest Bootstrap 5 grid system in our tutorial: mdbootstrap.com/docs/standard...
Download Bootstrap:
mdbootstrap.com/docs/standard...
===============================
🎁 Join our mailing list & receive exclusive resources for developers
mdbootstrap.com/newsletter/
⭐ Support the creation of open-source packages with a STAR on GitHub
github.com/mdbootstrap/mdb-ui...
👨‍👩‍👧‍👦 If you have any questions - don't hesitate to ask on our Facebook group:
/ 682245759188413
🎓 Learn responsive web design with the latest Bootstrap 5
• Bootstrap 5 tutorial -...
📥 Download Material Design for Bootstrap - FREE open-source UI KIT
mdbootstrap.com/docs/standard/
#bootstrap5#tutorial#grid#programming
0:00 Intro
0:48 Installation
4:08 Bootstrap Grid Explained
5:40 Breakpoints
6:30 Bootstrap grid examples
10:10 Changes in Bootstrap 5
10:30 Tutorial
10:55 Containers
13:49 Columns
14:14 Gutters

Опубликовано:

3 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 138

@Mdbootstrap 2 года назад

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!

@icecut7403 2 года назад

How we can increase or decrease height of row or column ? Is that any class available for that ?

@willgonzy 3 года назад

Those shortcuts were life changing. Love your content!

@AlejandroMuro0tto 3 года назад

This is one of the key functions of bootstrap and its very well explained

@annecapongcol3759 2 года назад

Thank you for this. I’m a new coder and still learning Bootstrap. Your visual demonstration is easy to understand. This is what I am looking for.

@Mdbootstrap 2 года назад

Great to hear!

@heshmania 3 года назад

Thank you! This is an enlightenment for a beginner just like me.

@luqmansecond6375 2 года назад

Great video! I have been having troubling understand the grid system but it's all cleared up now. Thank you!

@Mdbootstrap 2 года назад

Glad it helped!

@jamesfrick4585 3 года назад

Great video and lesson. It does not start with the details of Bootstrap as does many videos. Instead, David's video shows the effects of using Bootstrap on layouts. The orientation of the video is on the overall page and how Bootstrap controls page layout, especially for responsive design. This is a great way to teach Bootstrap. I have been struggling organizing my pages, and started looking at several other Bootstrap videos. These were not motivating as they did not tell me how to put together HTML code for a responsive design. David at MDB shows an example of how to build a Bootstrap page for responsiveness, and his video is very motivating to continue to earn Bootstrap.

@Mdbootstrap 3 года назад

Thank you James, I really appreciate that, I am glad that you enjoyed it. :)

@jubojubayer5109 3 года назад

You are very clear. Very good tutorial. Thanks.

@DawidAdach 4 года назад

0:48 Installation 4:08 Bootstrap Grid Explained 5:40 Breakpoints 6:30 Bootstrap grid examples 10:10 Changes in Bootstrap 5 10:30 Tutorial 10:55 Containers 13:49 Columns 14:14 Gutters

@thunderbolt997 3 года назад

@Deshawn Salvador yeah it totally worked, FBI is outside my apartment now

@berjaoui92 3 года назад

Are you the guy of that channel? If yes, thank you for so generous sharing... 👍

@DawidAdach 3 года назад

@@berjaoui92 yes I am, appreciate :) Thank you

@mylearnings7951 Год назад

salamat sa imong gihimo nga bedyo sege pa himo kapa ng mga bedyo

@walkingcode 4 года назад

Thanks for quick introduction

@ahmedyusuf4355 2 года назад

i really love how you keep your tutorial simple..

@Mdbootstrap 2 года назад

Thank you! 😊

@yousefalhassan8078 2 года назад

Hi, Thanks for the clear explaination of using bootstrap 5 and the gutter part

@manjulajayasekara8598 Год назад

Very good explanation in a practical way guy. Keep adding more videos like this. I'm very interested.🖤🖤🖤

@kadir572 Год назад

Great and short tutorial, thanks!

@robertolinsoficial Год назад

Best explanation so far

@geekyskill4156 2 года назад

Your website is amazing I used everyday

@lofi_Insomnia_ 2 года назад

Saved my life, thanks!

@rachanaa6745 2 года назад

amazing explanation in simple words. thank you sir !

@Mdbootstrap 2 года назад

Most welcome!

@abelt8958 Год назад

Thanks for the video.

@AxxionMarketPlace-iu6ri 9 месяцев назад

Thank you

@tumon001 2 года назад

Thanks Dawud

@argedinopasoles 2 года назад

Awesome tutorial,thank you!

@Mdbootstrap 2 года назад

Glad it was helpful!

@ridaharun3621 3 года назад

really Useful

@jeevam7110 4 месяца назад

Big thanks brother, I learned it at very ease!

@Mdbootstrap 4 месяца назад

That's great to hear! Keep Coding :)

@regarto739 6 месяцев назад

thank you, sir. You are life saver.

@Mdbootstrap 6 месяцев назад

Happy to help :)

@taxslasher 2 года назад

Nicely explained. Thank you.

@Mdbootstrap 2 года назад

Glad you liked it :)

@leonardo123456692 2 года назад

Thank you! Great content and diction to explain, i've learned a lot! Greetings from Brazil! Have a great week

@parhamd7333 3 года назад

ty perfect toturial i love it 😘👏😘

@olegiva843 Год назад

yes, you are hero. continue same style: from scratch step by step ;-)

@newtonoluoch5074 3 года назад

Awesome!!! and Thanks thanks thanks

@francksgenlecroyant 2 года назад

Thanks bro! you helped me!

@Mdbootstrap 2 года назад

Glad I could help!

@maweryoutube9852 2 года назад

Amazing video, Thank you so much and keep it up

@Mdbootstrap 2 года назад

Glad you liked it!

@_instabil 3 года назад

useful :* thanks

@AnuradhaPasare Год назад

thank you for vedio.

@illusioniste00 3 года назад

thanks!!

@ravindran9210 2 года назад

Thanks you.. I am learning bootstrap so it's great help to me

@Mdbootstrap 2 года назад

Glad to hear that :)

@velmuruganr9321 2 года назад

really thank you brother..

@Mdbootstrap 2 года назад

You are most welcome :)

@oguzturkyilmaz543 5 месяцев назад

Thanks

@Mdbootstrap 5 месяцев назад

Happy to help. Keep Coding :)

@jurisamk 3 года назад

thanks!

@davidgg8462 2 года назад

super good

@Mdbootstrap 2 года назад

Thank you! Cheers!

@mahakal3800 4 года назад

Nice

@balasubramaniamv5807 8 месяцев назад

thank you sir very much for the video

@miguelfernandes7728 Год назад

Hello David, Great video. Have a suggestion for your next video, a bootstrap grid with; Title 1 with 4 box for images, title 2 with 3 box, title 3 with 2 box, title 4 with 1 box( each one displayed in vertical) and in small devices it displays in vertical beggining with Title 1.

@farmar4623 2 года назад

Helpful

@Mdbootstrap 2 года назад

Glad you think so!

@dinukachamod9038 2 месяца назад

best ❤

@Mdbootstrap 2 месяца назад

Happy to hear that! Thank You! Keep Coding :)

@Ghostv33 3 года назад

i used col-md for a webpage and did css on a 1920*1080 monitor but things get broken when screen size is less 1200px... is that normal? shouldn't it stay same in 768-1200px?

@starbwaars971 Год назад

what extensions do you use, seems really functional

@PlatoOnnPluto Год назад

So if some of those columns had a img or text would it over lap the container that has the background blue or will it stay inside that same container?????

@ahmedel-hindawi9226 3 года назад

is it a full tutorial on grid systems or it's just a beginning like, Is there is a more advanced video on grid systems?

@amberfatima9704 3 года назад

how do you have gaps/spacing in between the columns?? please tell me. Which bootstrap class is used to apply such spacing in between the columns

@Mdbootstrap 3 года назад

Please post question on our facebook group : facebook.com/groups/682245759188413

@shauryasharma190 3 года назад

what is that popper link?

@vishvark244 14 дней назад

can you tutorial the desktop layout in this video please

@lararawf6100 3 года назад

God bless you

@sunilk9760 11 месяцев назад

12 unit means 12 fractions or 12fr as in css3

@thakiddx Год назад

how do i do that shortcut @ 12:21 exactly?

@amberfatima9704 3 года назад

how do you have gaps/spacing in between the columns??

@Mdbootstrap 3 года назад

Please post question on our facebook group : facebook.com/groups/682245759188413

@elmontasermarketing7959 3 года назад

My like is 1000

@joshcollins9125 3 года назад

Have you made the second tutorial you mentioned?

@DawidAdach 2 года назад

Yup, just check our channels videos : ru-vid.com

@jarnovaniersel1045 3 года назад

someone has a tutorial how to make something like example 2? To make one big item that overlaps the other rows?

@forworkforwork967 3 года назад

what font (font size) and theme is used in vs code?

@Mdbootstrap 3 года назад

Check this out: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-fh97jo6Xur8.html&ab_channel=MDB-justcodeit

@mostafahassan5366 3 года назад

where is the toutrial i cant see it. you explain what ???

@swastikjainsj 3 года назад

can u make container like amazon i am trying but failed i will not give up f u help me ?

@VelvetSage 3 года назад

would've been cool if you provided a source of your grid example

@scott7385 3 года назад

Right?! Like the style section which just magically popped up.

@anilaldtg3054 3 года назад

i need 5 columns in bootstrap how to do please help me

@Mdbootstrap 3 года назад

Use 5x col-2 and center it, it doesn't have to sum up to 12, it only cannot exceed 12 in total.

@90daner 2 года назад

how you update automatic your browser ? what is the name of the pluging for vs code?

@webtechnology771 3 года назад

what is the main difference between bootstrap4 and 5.please give an example

@Mdbootstrap 3 года назад

Main difference is jQuery. Bootstrap 4 relays on that, while Bootstrap 5 is rewritten in pure JS. You can still use jQuery with B5, though...

@anilaldtg3054 3 года назад

5 columns how to do

@Mdbootstrap 3 года назад

Depending on size, you could use 5x col-2 and center it using flex box (. d-flex .justify-content-center)

@arrowfunc3458 2 года назад

Videos like this make me question why I have 30+ udemy courses on Web Development 🤣.

@alirezar7920 Месяц назад

1)which grid system is better and easier bootstrap or css:grid? 2) can we use bootstrap only for the grid system and the rest of the website styling to be done by vanila css?

@Mdbootstrap Месяц назад

1) Bootstrap is easier, but CSS has some easier modern features like grid-template-areas, auto-placement, and fractional units. 2) Yes, you can absolutely use Bootstrap solely for its grid system and handle the rest of the styling with vanilla CSS. This approach allows you to take advantage of the simplicity and responsiveness of Bootstrap's grid while maintaining complete control over the design and styling with your custom CSS. Here’s how you can do it: Include Bootstrap CSS: Add the Bootstrap CSS file to your project, either by linking to the CDN or downloading it. Use Bootstrap Grid Classes: Utilize Bootstrap’s grid classes in your HTML to define the layout. Custom Styling with Vanilla CSS: Create a separate CSS file for your custom styles and include it after Bootstrap’s CSS. This way, your styles can override any Bootstrap styles if necessary. Write Your CSS: In your custom CSS file, you can write any styles you need for your project. Keep Coding :)

@alirezar7920 Месяц назад

@@Mdbootstrap thanks for the response🙏

@Mdbootstrap Месяц назад

@@alirezar7920 No problem, happy to help :)

@deepakdevde1148 3 года назад

Extra small =768px Medium>=992px Large>=1200px Class prefix .col-xs- .col-sm- .col-md- .col-lg-

@RaviTeja-ec7mf 4 года назад

We are excepting examples

@AsliddinMakhmudov 2 года назад

rahmat kotta

@sombatpan1675 2 года назад

How to make some columns big and some columns small?

@Mdbootstrap 2 года назад

You must use the appropriate grid classes. More on this topic can be found in the documentation -mdbootstrap.com/docs/standard/layout/grid/

@ahmedel-hindawi9226 3 года назад

in 13:50 you mentioned another tutorial Is it out yet? :( you really saved my life, thanks

@Mdbootstrap 3 года назад

Yup ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-KVyEH1pIZkA.html

@joshcollins9125 3 года назад

Sorry but I have the same question. Your link goes to a git tutorial. Did you upload the wrong link?

@balasubramaniamv5807 8 месяцев назад

thank you very much your video helped me to complete my task...expecting more video's from you....

@Mdbootstrap 8 месяцев назад

Happy to help! We'll have some new content coming shortly (busy time for David right now, he just came back from vacation)

@muhammadrifqy24 2 года назад

finally, my problem is solved

@Mdbootstrap 2 года назад

I'm glad you found this video useful :)

@bhaijikumbar4710 3 года назад

How you giving space between column please tell me ....

@Mdbootstrap 3 года назад

Please post question on our facebook group : facebook.com/groups/682245759188413

@George-ew2in 3 года назад

make border man

@tilakbahadur9634 3 года назад

This version just for testing

@Anu_was_here 2 года назад

@8:30 I thought the “col-xs-12” means extra small columns, wil show 12 columns maximum. 😂😂 That makes more sense.

@AllahomAnsorGaza 3 года назад

Please HELP HELP HELP How to import new colors and how to use THEM PLEASE

@Mdbootstrap 3 года назад

Which colors do you mean? Theming? getbootstrap.com/docs/5.0/customize/color/#theme-colors

@AllahomAnsorGaza 3 года назад

@@Mdbootstrap yea how to import them i really dont know

@inspireitoday 3 года назад

Why the thumbnail doesn't match with the content??

@Mdbootstrap 3 года назад

Dear Ahmed, obviously we cannot cover all possible examples, please check this tutorial for more advanced setups mdbootstrap.com/docs/standard/layout/grid/

@George-ew2in 3 года назад

exactly! this is bad way.

@mahakal3800 4 года назад

Hii

@mahakal3800 4 года назад

Bro

@briepeterson9718 2 года назад

why can we only raise one thumb up??? 😂

@Mdbootstrap 2 года назад

🤷

Месяц назад

Now that there is a powerful and easy NATIVE grid system in CSS it's really totally unnecessary to use a rather limited layer on top of that. You are missing a lot of the functionality that makes CSS grid great, like named grid areas, overlapping cells and all that stuff. There is a lot more possible with the native tools that can be replicated with some utility classes. And you will never learn how to use e.g. CSS variables to write reusable and easy to adapt But the biggest unavoidable problem with all these extra systems (and tailwind et al.) is that they will be obsolete eventually, because everyone is using this other [hot new thing]™ now, that you then have to learn. I got burned a number of times and decided to ditch all these css libraries and grid systems in favor of the native grid. And it's really great! I use only my own CSS, no third party stuff that brings it's own quirks to work around.

@rodrigolima2819 3 года назад

Cliquei achando q tava em portuga. Cara de brasileiro da porra kkk

@oldadajbych8123 Год назад

I have clicked on the video because I hoped that in the end I will know how to create the layout in cover image. It does not get even close. There wsas the example with vertical fill, but it is not in the video. Sorry, but this was not helpful.