Bootstrap 5 Crash Course Tutorial #7

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

Рет қаралды 153,341

3 жыл бұрын

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

Пікірлер: 75

@nkpvg6805 3 жыл бұрын

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 3 жыл бұрын

Thank you :)

@chaderenyore1748 3 жыл бұрын

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 2 жыл бұрын

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

@saqibhz07 3 жыл бұрын

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

@codewithfarhad8594 3 жыл бұрын

could not agree more :)

@LubieArbuzy 3 жыл бұрын

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

@NetNinja 3 жыл бұрын

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

@michal2135 3 жыл бұрын

he likes watermelons !

@LubieArbuzy 3 жыл бұрын

@@michal2135 ;)

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

@atirah14 3 жыл бұрын

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

@marwan.v1511 Жыл бұрын

that was absolutely awesome, thanks.

@cotneit 3 жыл бұрын

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 😂

@user-te5ot7fg9k 4 ай бұрын

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

@mooseaf3515 Жыл бұрын

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

@sonicjetson6253 Жыл бұрын

Two words - life saver 👌

@khaledkara8774 7 ай бұрын

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

@JASIRBOSS 3 жыл бұрын

thanks for your efforts it is really appreciated👍

@MrKRABBB 9 ай бұрын

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

@itchitrigger8185 2 жыл бұрын

Thank you very much for this great tutorial

@user-mf9il2ft6b Жыл бұрын

thank you very much, very clean expains !

@KRAMDROIDTECH 3 жыл бұрын

Saved to my library ❗

@ptys. 2 жыл бұрын

Lifesaver, thank you.

@rasheds_miya 3 ай бұрын

Thank you bro for explaining very well

@juanandrew1356 2 жыл бұрын

great explanation. thanks

@HackerBoy-hm2sr Жыл бұрын

really looks good grid system responsive.

@nabilhabib4279 10 ай бұрын

you are better than my teachers at university :)

@i_am_a_boy5655 2 жыл бұрын

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

@novanoskillz4151 2 жыл бұрын

amazing tut.. thanks bro

@briandacallos4234 2 жыл бұрын

Too much knowledge here

@yevgeniykononovich9869 2 жыл бұрын

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.

@ernestogarcia5762 Жыл бұрын

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

@NetNinja Жыл бұрын

Glad it was helpful Ernesto! :)

@johnedreicarinal8579 3 ай бұрын

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

@NetNinja 3 ай бұрын

You are welcome 😊 have fun!

@taposhsorkar1613 Жыл бұрын

wow great tutorial

@jacopozecchi Жыл бұрын

Marvelous explanation, thank you.

@NetNinja Жыл бұрын

You're very welcome! thanks for watching :)

@Anteater23 2 ай бұрын

Helpful

@hadihaqi Жыл бұрын

You are perfect bro . Thanks for this beautiful course😍

@NetNinja Жыл бұрын

Thanks Hadi, hope it was helpful!

@jamespotter4666 2 жыл бұрын

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

@NetNinja 2 жыл бұрын

Thanks for watching James :)

@ridl27 2 жыл бұрын

@ilya_123__ 4 ай бұрын

thank you!

@NetNinja 4 ай бұрын

You're welcome!

@MissMBMB Жыл бұрын

Thank you so much 😊

@NetNinja Жыл бұрын

You're welcome Brandy 😊

@briannguyen5057 2 жыл бұрын

amazing

@IndritVaka 2 жыл бұрын

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

@techie_teko8923 5 ай бұрын

you the best

@hamzehqatash6256 2 жыл бұрын

Thank you very much ^_^

@alexshepel9387 2 жыл бұрын

nice!

@frontendguru8657 3 жыл бұрын

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

@reynhardprivate397 3 жыл бұрын

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

@riskitall7421 2 жыл бұрын

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

@lunnux. 2 жыл бұрын

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

@muhammadmehdi1304 3 жыл бұрын

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

@KRAMDROIDTECH 3 жыл бұрын

Welcome back ninjas

@mostafahegazy7289 2 жыл бұрын

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

@joshpotter177 2 жыл бұрын

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

@smartTechn0l0gy 2 жыл бұрын

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

@ognjenumicevic7183 2 жыл бұрын

hold alt while clicking on several spots..

@ravireddy7894 3 жыл бұрын

please do on java.

@asp2867 3 жыл бұрын

do you put all lessons of this course on youtube?

@codewithfarhad8594 3 жыл бұрын

yes that's what these videos are for

@ahmedr. 2 жыл бұрын

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

@alwan4940 3 жыл бұрын

First

@MaxMayer1 3 жыл бұрын

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

@codewithfarhad8594 3 жыл бұрын

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

@MaxMayer1 3 жыл бұрын

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