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

Подписаться 1,5 млн

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

50% 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

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

17 июн 2021

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

Комментарии : 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 2 года назад

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

@marwan.v1511 Год назад

that was absolutely awesome, thanks.

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

@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

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

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

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

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

@MrKRABBB 9 месяцев назад

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

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

thanks for your efforts it is really appreciated👍

@khaledkara8774 7 месяцев назад

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

@mooseaf3515 Год назад

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

@user-mf9il2ft6b Год назад

thank you very much, very clean expains !

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

Thank you very much for this great tutorial

@sonicjetson6253 Год назад

Two words - life saver 👌

@ptys. 2 года назад

Lifesaver, thank you.

@rasheds_miya 3 месяца назад

Thank you bro for explaining very well

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

Saved to my library ❗

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

great explanation. thanks

@HackerBoy-hm2sr Год назад

really looks good grid system responsive.

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

amazing tut.. thanks bro

@ernestogarcia5762 Год назад

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

@NetNinja Год назад

Glad it was helpful Ernesto! :)

@taposhsorkar1613 Год назад

wow great tutorial

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

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

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

You are welcome 😊 have fun!

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

@nabilhabib4279 10 месяцев назад

you are better than my teachers at university :)

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

Helpful

@jamespotter4666 Год назад

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

@NetNinja Год назад

Thanks for watching James :)

@jacopozecchi Год назад

Marvelous explanation, thank you.

@NetNinja Год назад

You're very welcome! thanks for watching :)

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

amazing

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

nice!

@hadihaqi Год назад

You are perfect bro . Thanks for this beautiful course😍

@NetNinja Год назад

Thanks Hadi, hope it was helpful!

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

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

Thank you very much ^_^

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

@ilya_123__ 3 месяца назад

thank you!

@NetNinja 3 месяца назад

You're welcome!

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

you the best

@MissMBMB Год назад

Thank you so much 😊

@NetNinja Год назад

You're welcome Brandy 😊

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

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

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

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

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

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

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

@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

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

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

do you put all lessons of this course on youtube?

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

yes that's what these videos are for

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

please do on java.

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