Тёмный

Bootstrap 5 Crash Course Tutorial #5 - Utility Classes 

Net Ninja
Подписаться 1,5 млн
Просмотров 128 тыс.
50% 1

Hey gang, in this Bootstrap 5 tutorial I'll show you some of the different utility classes - for things like spacing and border - that we can add to our HTML elements.
🐱‍👤 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

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

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 89   
@Kikikuku2
@Kikikuku2 Год назад
I'm surprised why this tutorial doesn't have millions of likes or comments. This is the best tutorial ever. Thanks a lot
@NetNinja
@NetNinja Год назад
Thanks Kaki :)
@awuk3468
@awuk3468 3 года назад
Not boring at all, very informative, I love your tutorials!
@mehmedtrumankukavica8468
@mehmedtrumankukavica8468 2 года назад
I have nothin to add but illustrative too
@user-oi2hc5tv3x
@user-oi2hc5tv3x 10 месяцев назад
man you not boring at all, we love your work. keep it coming, even the thick borders.
@NetNinja
@NetNinja 10 месяцев назад
Thanks, will do! :)
@SirMika9
@SirMika9 Год назад
I am a beginner and this tutorial is excellent. I really like your way of teaching. Funny is that all other "beginner" tutorials I tried where not for beginners at all. Considering the fair price of your course I am going to buy as a thank you ;)
@NetNinja
@NetNinja Год назад
Awesome, thanks for your support Mika! :)
@miklosnemeth8566
@miklosnemeth8566 2 года назад
I love this kind of self-contained "encapsulated" styling. When anyone starts learning CSS, all books and instructors recommends to create separate CSS files and import them. This way the styling instruction are totally separated from the markup. If you wanted to understand a layout, you had to jump back and forth between the HTML and CSS files. What is presented here and promoted by Bootstrap, is forget about this separation: why jumping, why not just adding styles directly into the markup a self-contained encapsulated way? When you copy a block of markup, it will automatically rendered properly in the recipient Bootstrap supported page, since the markup is copied along, too. This is the new trend: Tailwind does this, Material CSS does this, Vaadin Luminar CSS is exactly like this. In this brave new world, the only CSS file ever needed is bootrrap.min.css, the rest should go into the markup.
@liiilliees
@liiilliees 2 года назад
You make coding easy. Thanks alot
@HappyHorge
@HappyHorge 2 года назад
Quick tips: when adding a div with classes, it's enough to write ".bg-primary" :D
@chanathipmorths7323
@chanathipmorths7323 10 месяцев назад
And again, thank you for such an amazing tutorial. These videos are awesome!
@NetNinja
@NetNinja 10 месяцев назад
You're very welcome! :) thanks
@injector6926
@injector6926 2 года назад
best Bootstrap course i seen ever :))
@prosodyspeaks4036
@prosodyspeaks4036 2 месяца назад
spot on mate, energy level, delivery, content-depth all seem perfect. good job
@NetNinja
@NetNinja 2 месяца назад
Much appreciated! :) thanks
@gert-janakerboom1314
@gert-janakerboom1314 3 месяца назад
great tutorials so far, thank you !
@aamish.iqbal01
@aamish.iqbal01 4 месяца назад
Utility Classes Masterclass Completed✅✅ Thanks sir!
@reynhardprivate397
@reynhardprivate397 3 года назад
I already made some doodles using some of the stuff a saw here much easier their writing all the CSS I did, however, did have to add some CSS for alignment but sure we'll cover classes for that soon as well
@AsheAve
@AsheAve 8 месяцев назад
Great info. One step at a time. This morning I knew CSS but not Bootstrap. Now I'm getting there... Thanks!
@NetNinja
@NetNinja 8 месяцев назад
Awesome to hear :) yep, a little every day soon mounts up!
@erkanisuf3604
@erkanisuf3604 3 года назад
Hey Ninja , thanks for tutorial. Can you also maybe add a video how to make changes on default classes too. E.g default colors to be diffrent etc.
@DavePawson
@DavePawson 2 года назад
Excellent, really useful. Tks
@joeri29
@joeri29 4 месяца назад
It was not at all boring. It was great!!!
@letsgoCoders
@letsgoCoders 5 месяцев назад
saved my life. Big kudos
@Sweven24
@Sweven24 3 года назад
Thanks a lot my dear brother❤️
@KingsleyOsborn
@KingsleyOsborn 10 месяцев назад
Very useful not boring at all! Good job
@NetNinja
@NetNinja 10 месяцев назад
Thanks Kingsley!
@afeesakinade4769
@afeesakinade4769 Год назад
Great Tutorial! Thanks a lot!
@NetNinja
@NetNinja 11 месяцев назад
Glad it was helpful Afees!
@nelofarzabi24
@nelofarzabi24 Год назад
you are great I lv this type teacher thanks for everything net ninja
@haiqal6941
@haiqal6941 4 месяца назад
this is REAL beginner tutorial.
@DanielTorres-gd2uf
@DanielTorres-gd2uf Год назад
banger series, nice work mate
@NetNinja
@NetNinja Год назад
Thanks Daniel :)
@briandacallos4234
@briandacallos4234 2 года назад
Thank you so much from the Philippines
@LoveisHell85
@LoveisHell85 3 года назад
I watch your videos every single day. Thank you so much. Please make more React Typescript Node MySQL courses
@joshel4278
@joshel4278 Год назад
Is there a way to specify the color for the box-shadow?
@ibrahimamoo6384
@ibrahimamoo6384 Год назад
good question. was also wondering if that is possible
@rifat625
@rifat625 3 года назад
Hey Ninja 🦹, your channel is the first place to go after lunch 💝✌️
@blavson
@blavson 2 года назад
Thank you sir!
@73dem6vmo7
@73dem6vmo7 11 месяцев назад
How do you duplicate lines so fast in VSC? I don't see you right-clicking or anything. Thanks.
@HackerBoy-hm2sr
@HackerBoy-hm2sr Год назад
this tutorial awesome.
@Kingstar_officialboy
@Kingstar_officialboy 9 месяцев назад
Best Tutorial…… clearest ❤
@NetNinja
@NetNinja 9 месяцев назад
Glad to hear that :) thanks
@familyaccount8908
@familyaccount8908 3 года назад
Waited months for your vid about bs5
@nipunmadhushanka1525
@nipunmadhushanka1525 Месяц назад
Best course thank you very much❤❤❤❤
@NetNinja
@NetNinja Месяц назад
Thanks for watching! :)
@hammadahmad5383
@hammadahmad5383 3 года назад
Thanks 😊😊
@thearmor9231
@thearmor9231 2 года назад
Thanks a lots :)
@zeadashraf524
@zeadashraf524 2 года назад
THANKS!
@ilya_123__
@ilya_123__ 3 месяца назад
thank you
@annasrizkybramoko9381
@annasrizkybramoko9381 11 месяцев назад
Lanjutkan lur
@pipocacripops9861
@pipocacripops9861 Год назад
ok, I have one question, whats is the difference between moving que margin on the Y direction, and margin on the top? cuz i can see the the div for Y direction still ocupies the full width...so...is wierd.....
@sallybugs1695
@sallybugs1695 Год назад
Margin-Y or *my* applies margin to top and bottom but *mt* margin top is only for the top
@AidaHashemii
@AidaHashemii 5 месяцев назад
Just i can say PERFECT
@NetNinja
@NetNinja 5 месяцев назад
Thanks Aida!
@dp3633
@dp3633 2 года назад
What is the shortcut used to convert the div and class into tags ?? Is this something specific to VSC ??
@wilhelminatetteh7246
@wilhelminatetteh7246 2 года назад
Its called Emmet. its a VSC extension
@dp3633
@dp3633 2 года назад
@@wilhelminatetteh7246 cool cool.. thank you Wilhelmina !!!
@Sway55
@Sway55 Год назад
can I get emmet (or something like it) in Visual Studio 2022? (not Code)
@prafulrane3591
@prafulrane3591 Год назад
Need a roadmap video to follow your channel content!!!!
@eddwinnas
@eddwinnas 2 года назад
nice
@cyrildeshmukh7319
@cyrildeshmukh7319 2 года назад
bolder is bolder than bold.. yes yes...!
@manto7
@manto7 3 года назад
This seems to be a new feature in BS 5
@wshacode
@wshacode Год назад
what is screen recorder?
@ridl27
@ridl27 2 года назад
ty
@dirgham7774
@dirgham7774 2 года назад
Unable to see changes in the fonts though. I guess I do not have the fonts folder in my downloaded fonts folder. Anyway, helpful tutorials 👍
@caiqueludemann5123
@caiqueludemann5123 Год назад
check if you're using the latest version... I was having the same problem, and now downloaded the 5.0 version and it's working fine. another thing that could be doing that I THINK could be if you're only adding one bootstrap css file or if all of them from the css folder... try either one or both of those solutions to see if it works.
@JazzKeyboardist3060
@JazzKeyboardist3060 Год назад
I had some interesting issues with some of this code in Code. I replicated this code and the first 6 examples came out ok on Preview, but beginning with "border success color at border-start" the effects did not all show up. Rounded Corners also did not show on Preview, but rounded pill corners, element with small box shadow, and element with large box shadow all look good. After that, none of the next 6 text items showed their effects. I saved this file and opened it in both the latest versions of Edge and Chrome, and got the same results. I triple-verified my code is exactly what you typed in. I have screen shots with the screen split in Code but I can't attach them here. Any ideas?
@coopertkm
@coopertkm Год назад
What version of Bootstrap are you using?
@JazzKeyboardist3060
@JazzKeyboardist3060 Год назад
@@coopertkm 5.3.0
@coopertkm
@coopertkm Год назад
@@JazzKeyboardist3060 The latest version of Bootstrap has deprecated a lot.of classes. I'd suggest using version 5.0.2 so you can follow along with Ninja's code.
@JazzKeyboardist3060
@JazzKeyboardist3060 Год назад
@@coopertkm What am I missing here? I should downgrade Bootstrap so I can correctly see the output of something you published? You do great work, and I apologize if I am missing something, but why would anyone learning Bootstrap for the first time want to use anything but the latest and greatest version?
@coopertkm
@coopertkm Год назад
@@JazzKeyboardist3060 I'm not Net Ninja the creater of this and other really good tutorials but I also experienced similar problems you're having. This tutorial was written for 5.0 when released. The problem with the version you have (5.3.0) is in Alpha mode and contains lots of new features that haven't been fully released yet and it deprecates certain things in this code which was designed for 5.0 I'd use 5.0.2 to follow along with this tutorial to get a good understanding of Bootstrap and then you can look at the new features coming in the latest version after and how to apply them.
@yassin_eldeeb
@yassin_eldeeb 3 года назад
Please tell me how you do that, How do you upload non stopable content one course after another, How do you get the time to learn every tech if you're recording/teaching/editing everyday 🤯🤯🤯 P.S: please tell me what kind of resources you're learning from docs/YT Vids/courses, I'm soo curious to know how you learn these Technologies pretty damn fast.
@birsingh5388
@birsingh5388 2 года назад
Any professional’s best source of learning is documentation of any language and new technology
@yassin_eldeeb
@yassin_eldeeb 2 года назад
@@birsingh5388 but it's too boring and not enjoyable at all.
@birsingh5388
@birsingh5388 2 года назад
@@yassin_eldeeb But documentation is the only best way to learn concepts deeply. Tutorial videos can be good as a refresher
@markjak5031
@markjak5031 Год назад
❤❤❤
@andreasl.1714
@andreasl.1714 Год назад
ms doesnt work on bootstrap 5, instead use ml. same goes for me => mr
@wemusthavechannelstocommen619
@wemusthavechannelstocommen619 2 месяца назад
and here I was, fiddling with style.css like a donkey, for weeks. lol, lmao even.
@KulturanCov
@KulturanCov 6 месяцев назад
You, sir, are your weight worth in gold!
@lucascamino8615
@lucascamino8615 7 месяцев назад
Everything was going well, until MarginLeft was not ml instead of ms... 😅
@AnasandAmmar
@AnasandAmmar 3 года назад
First 🎉🎉
@prafulrane3591
@prafulrane3591 Год назад
Anyone in 2023??
@prakharkanth
@prakharkanth Год назад
Yo bro
@hamzehqatash6256
@hamzehqatash6256 2 года назад
Thanks a lots :)
@777etr6
@777etr6 Год назад
thank you
Далее
Bootstrap 5 Crash Course Tutorial #6 - Containers
6:04
Bootstrap 5 Crash Course
1:11:15
Просмотров 438 тыс.
Arigato !! 😂
00:11
Просмотров 2,7 млн
Learn Flexbox CSS in 8 minutes
8:16
Просмотров 1,4 млн
Bootstrap 5 Crash Course Tutorial #9 - Navbars
12:44
Просмотров 121 тыс.
Customise Bootstrap's Sass
22:27
Просмотров 11 тыс.
Bootstrap 5 Crash Course | Website Build & Deploy
1:18:48
Bootstrap 5 Crash Course Tutorial #10 - Cards
12:24
Просмотров 88 тыс.
Tailwind CSS Tutorial #1 - Intro & Setup
13:41
Просмотров 751 тыс.