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:
netninja.dev/p...
🐱‍💻 Access the course files on GitHub:
github.com/iam...
🐱‍💻 HTML & CSS Crash Course:
• HTML & CSS Crash Cours...
🐱‍💻 Node.js Crash Course:
• Node JS Tutorial for B...
🐱‍💻 SASS Crash Course:
• SASS Tutorial #1 - Wha...
🐱‍💻 VS Code - code.visualstu...
🐱‍💻 Bootstrap 5 Docs - getbootstrap.c...
🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@nkpvg6805]

Whoaaaaaa 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!!

[@NetNinja]

Thank you :)

[@saqibhz07]

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

[@codewithfarhad8594]

could not agree more :)

[@LubieArbuzy]

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

[@NetNinja]

Ah that's awesome, thank you so much for the support! :)

[@michal2135]

he likes watermelons !

[@LubieArbuzy]

@@michal2135 ;)

[@salvatoreceravolo1414]

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

[@mostinho7]

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.

[@TheSabKuchh]

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

[@chaderenyore1748]

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.

[@mooseaf3515]

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

[@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 😂

[@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

[@atirah14]

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

[@khaledkara8774]

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

[@i_am_a_boy5655]

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 THERE!!!!!!!!!!

[@johnedreicarinal8579]

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

[@NetNinja]

You are welcome 😊 have fun!

[@ernestogarcia5762]

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

[@NetNinja]

Glad it was helpful Ernesto! :)

[@HackerBoy-hm2sr]

really looks good grid system responsive.

[@nabilhabib4279]

you are better than my teachers at university :)

[@MrKRABBB]

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

[@sonicjetson6253]

Two words - life saver 👌

[@jacopozecchi]

Marvelous explanation, thank you.

[@NetNinja]

You're very welcome! thanks for watching :)

[@rasheds_miya]

Thank you bro for explaining very well

[@beginner_bro]

best explanation

[@marwan.v1511]

that was absolutely awesome, thanks.

[@hadihaqi]

You are perfect bro . Thanks for this beautiful course😍

[@NetNinja]

Thanks Hadi, hope it was helpful!

[@leonmarienga3293]

Thank you

[@JASIRBOSS]

thanks for your efforts it is really appreciated👍

[@ptys.]

Lifesaver, thank you.

[@user-mf9il2ft6b]

thank you very much, very clean expains !

[@ilya_123__]

thank you!

[@NetNinja]

You're welcome!

[@KRAMDROIDTECH]

Saved to my library ❗

[@jamespotter4666]

thank you man you are a great teacher :3 love ya

[@NetNinja]

Thanks for watching James :)

[@IndritVaka]

Thanks! That required container at grid took me hours, and I couldn't find why is that weird behavior

[@MissMBMB]

Thank you so much 😊

[@NetNinja]

You're welcome Brandy 😊

[@itchitrigger8185]

Thank you very much for this great tutorial

[@juanandrew1356]

great explanation. thanks

[@taposhsorkar1613]

wow great tutorial

[@novanoskillz4151]

amazing tut.. thanks bro

[@Anteater23]

Helpful

[@briandacallos4234]

Too much knowledge here

[@yevgeniykononovich9869]

Hi--great content--thanks! Question: at 4:12 you mention that default behaviour is for column elements to occupy same amount of space in a row by dividing the 12 available columns equally, but then at 7:36, you seem to state that when no column specification is provided for a given screen size, the default behavior is for a column element to take up all 12 columns. Does this default behavior change from 'equal columns per element' to '12-columns per element' when you add responsive classes to the class definition? I didn't find reference to this in Bootstrap documentation.

[@ridl27]

ty

[@techie_teko8923]

you the best

[@riskitall7421]

The problem is when we put a tag or something inside of column, align-items-center doesn't work, why?

[@lunnux.]

You may be looking for this class:
d-flex justify-content-center (align horizontally)
d-flex align-content-center (align vertically)

[@reynhardprivate397]

The grid system on its own is already a win for me writing the CSS for grids and flexbox is a pain :-)

[@muhammadmehdi1304]

U should goo for big React-native advance tutorials with all it's APIs

[@briannguyen5057]

amazing

[@alexshepel9387]

nice!

[@hamzehqatash6256]

Thank you very much ^_^

[@KRAMDROIDTECH]

Welcome back ninjas

[@ahmedr.]

the original css grid is much better and straight without the hassle of adding these classes.

[@ravireddy7894]

please do on java.

[@smartTechn0l0gy]

how did you manage to write (class= "col") to all div at the same time? I like that shortcut :)

[@ognjenumicevic7183]

hold alt while clicking on several spots..

[@asp2867]

do you put all lessons of this course on youtube?

[@codewithfarhad8594]

yes that's what these videos are for

[@BrainRotFun]

what if i use col-md-6 for the first 2 divs and then col-md-12 for the third div and i want the third div to be positioned in the center not in the left

[@mostafahegazy7289]

Thank you, but i have a question, how did u write class="col" to all div at the same time ?

[@joshpotter177]

Alt+click. You can watch it and see at @3:30

[@MaxMayer1]

Здравствуйте мои дорогие. Мне предлагают курс junior Python developer за 90 тысяч рублей. Обещают сделать из меня пайтон джун разработчиком за 420 часов учёбы и практики(всё вместе). Это реально? Или очередной лохотрон???

[@codewithfarhad8594]

if you want people here to help you then you should probably write your question in English

[@MaxMayer1]

@@codewithfarhad8594 I have a paid course that promises to make me a junior Python developer in 420 hours of learning (theory + practice). This is real or is it a scam???

[@alwan4940]

First

[@TheBull06]

are we really expected to remember all this?

[@kiyu3229]

That's why the documentation exist

[@gddeufedhfezr1224]

You don't need to write div.xyz you can just write .xyz 👍