Bootstrap 5 Crash Course Tutorial #7 - Grid Layout (part 1)

Learn how to use the grid system in Bootstrap 5 - using containers, rows, columns and responsive classes too.

🐱‍👤 View this course in full now - without ads - on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:

🐱‍💻 HTML & CSS Crash Course:

🐱‍💻 SASS Crash Course:

🐱‍💻 Social Links:

[nkpvg]

You are just the best coding teacher and you put so much effort into teaching us and that to for free!!!!
I love you and your teaching!!

[saqibhz]

Another excellent series. Thumbs up!
A series combining bootstrap 5 with react would be nice addition to your great channel.

[salvatoreceravolo]

Great class. I really appreciated the short and direct videos. Easy to follow and gets right to the point.

[LubieArbuzy]

Finally rocking my new badge 😎
Thank you for maintaining good and well explained content for so much time ♥️

[mostinho]

Done thanks
Have to wrap component in container and then in row class divs to make use of grid
You specify how many columns each item can take out of 12. If assigned 6 columns then will take up half. You can tell each component to take up different column widths depending on the screen size. So you can assign a component both col 6 and col 12 md classes so that when the screen size goes to medium the component takes the entire width. Remember bootstrap breakpoints go from smallest to largest.

[chaderenyore]

Thank you so much, Shaun, I really appreciated this video, all your tutorials I've been watching are very helpful but this one hits more cause it's when I really needed it, I've been working with this bootstrap 5 and its utility classes, but I never really understood its grid system responsiveness, and this video made everything clear, Thanks so much.

[TheSabKuchh]

Thank you Shaun for your efforts. I've become a fan of your ways of teaching...

[mooseaf]

I think the grid just clicked. Well find out when I dive into the project tomorrow. Thank you for sharing your knowledge.

[IlieAlexandruFlorea]

Thank you so much . i ve just started learning front-end and you ve helped me more than my trainer. You are awesome. Thx for sharing with us thi

[cotneit]

Omg I just realized that yesterday I centered columns by specifying offset on the first column instead of justify-content on a row. Gonna go fix it now before someone notices 😂

[khaledkara]

Sie sind 'tot' hervorragend 🎉..
Vielen Dank ❤

[atirah]

Thank you so much. I tried reading the documentation but couldn’t understand. This really helps. Thanks again.

[ernestogarcia]

Well explain and clear thank you so much 🙏🏼💪🏼

[nabilhabib]

you are better than my teachers at university :)

[johnedreicarinal]

thank you so much for the wonderful tutorial, now i can start my project with ease :))

[HackerBoy-hmsr]

really looks good grid system responsive.

[i_am_a_boy]

BRO YOU ARE THE BESTTT CODING TEACHER OUT THERE, LIKE THE WAY YOU TEACH AMAZING, I HAVE TO CREATE A WEBSITE AND I REALLY NEEDED BOOTSTRAP TO MAKE LOOK GOOD. MATE YOU EARNED A NEW SUBSCRIBER. FR YOU ARE THE BEST CODING TEACHER OUT

[hadihaqi]

You are perfect bro . Thanks for this beautiful course😍

[MrKRABBB]

thank you so much ! I don't think you can explain it any better!

[rasheds_miya]

Thank you bro for explaining very well