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/bootstrap-5-cr...
🐱‍💻 Access the course files on GitHub:
github.com/iamshaunjp/bootstr...
🐱‍💻 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.visualstudio.com/
🐱‍💻 Bootstrap 5 Docs - getbootstrap.com/docs/5.0/get...
🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

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

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

[@TheSabKuchh]

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

[@user-te5ot7fg9k]

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

[@marwan.v1511]

that was absolutely awesome, thanks.

[@atirah14]

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

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

[@JASIRBOSS]

thanks for your efforts it is really appreciated👍

[@mooseaf3515]

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

[@MrKRABBB]

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

[@itchitrigger8185]

Thank you very much for this great tutorial

[@user-mf9il2ft6b]

thank you very much, very clean expains !

[@rasheds_miya]

Thank you bro for explaining very well

[@khaledkara8774]

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

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

[@ptys.]

Lifesaver, thank you.

[@ernestogarcia5762]

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

[@NetNinja]

Glad it was helpful Ernesto! :)

[@juanandrew1356]

great explanation. thanks

[@sonicjetson6253]

Two words - life saver 👌

[@johnedreicarinal8579]

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

[@NetNinja]

You are welcome 😊 have fun!

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

[@novanoskillz4151]

amazing tut.. thanks bro

[@KRAMDROIDTECH]

Saved to my library ❗

[@HackerBoy-hm2sr]

really looks good grid system responsive.

[@jacopozecchi]

Marvelous explanation, thank you.

[@NetNinja]

You're very welcome! thanks for watching :)

[@hadihaqi]

You are perfect bro . Thanks for this beautiful course😍

[@NetNinja]

Thanks Hadi, hope it was helpful!

[@jamespotter4666]

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

[@NetNinja]

Thanks for watching James :)

[@taposhsorkar1613]

wow great tutorial

[@ilya_123__]

thank you!

[@NetNinja]

You're welcome!

[@briandacallos4234]

Too much knowledge here

[@MissMBMB]

Thank you so much 😊

[@NetNinja]

You're welcome Brandy 😊

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

[@Anteater23]

Helpful

[@nabilhabib4279]

you are better than my teachers at university :)

[@frontendguru8657]

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

[@IndritVaka]

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

[@briannguyen5057]

amazing

[@alexshepel9387]

nice!

[@hamzehqatash6256]

Thank you very much ^_^

[@techie_teko8923]

you the best

[@ridl27]

ty

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

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

[@KRAMDROIDTECH]

Welcome back ninjas

[@muhammadmehdi1304]

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

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

[@reynhardprivate397]

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

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

[@ravireddy7894]

please do on java.

[@ahmedr.]

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

[@alwan4940]

First

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

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