Bootstrap 5 Crash Course Tutorial #5 - Utility Classes
HTML-код
- Опубликовано: 2 июн 2024
- 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
I'm surprised why this tutorial doesn't have millions of likes or comments. This is the best tutorial ever. Thanks a lot
Thanks Kaki :)
Not boring at all, very informative, I love your tutorials!
I have nothin to add but illustrative too
man you not boring at all, we love your work. keep it coming, even the thick borders.
Thanks, will do! :)
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 ;)
Awesome, thanks for your support Mika! :)
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.
You make coding easy. Thanks alot
Quick tips: when adding a div with classes, it's enough to write ".bg-primary" :D
And again, thank you for such an amazing tutorial. These videos are awesome!
You're very welcome! :) thanks
best Bootstrap course i seen ever :))
spot on mate, energy level, delivery, content-depth all seem perfect. good job
Much appreciated! :) thanks
great tutorials so far, thank you !
Utility Classes Masterclass Completed✅✅
Thanks sir!
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
Great info. One step at a time. This morning I knew CSS but not Bootstrap. Now I'm getting there... Thanks!
Awesome to hear :) yep, a little every day soon mounts up!
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.
Excellent, really useful. Tks
It was not at all boring. It was great!!!
saved my life. Big kudos
Thanks a lot my dear brother❤️
Very useful not boring at all! Good job
Thanks Kingsley!
Great Tutorial! Thanks a lot!
Glad it was helpful Afees!
you are great I lv this type teacher thanks for everything net ninja
this is REAL beginner tutorial.
banger series, nice work mate
Thanks Daniel :)
Thank you so much from the Philippines
I watch your videos every single day. Thank you so much. Please make more React Typescript Node MySQL courses
Is there a way to specify the color for the box-shadow?
good question. was also wondering if that is possible
Hey Ninja 🦹, your channel is the first place to go after lunch 💝✌️
Thank you sir!
How do you duplicate lines so fast in VSC? I don't see you right-clicking or anything. Thanks.
this tutorial awesome.
Best Tutorial…… clearest ❤
Glad to hear that :) thanks
Waited months for your vid about bs5
Best course thank you very much❤❤❤❤
Thanks for watching! :)
Thanks 😊😊
Thanks a lots :)
THANKS!
thank you
Lanjutkan lur
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.....
Margin-Y or *my* applies margin to top and bottom but *mt* margin top is only for the top
Just i can say PERFECT
Thanks Aida!
What is the shortcut used to convert the div and class into tags ?? Is this something specific to VSC ??
Its called Emmet. its a VSC extension
@@wilhelminatetteh7246 cool cool.. thank you Wilhelmina !!!
can I get emmet (or something like it) in Visual Studio 2022? (not Code)
Need a roadmap video to follow your channel content!!!!
nice
bolder is bolder than bold..
yes yes...!
This seems to be a new feature in BS 5
what is screen recorder?
ty
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 👍
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.
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?
What version of Bootstrap are you using?
@@coopertkm 5.3.0
@@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.
@@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?
@@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.
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.
Any professional’s best source of learning is documentation of any language and new technology
@@birsingh5388 but it's too boring and not enjoyable at all.
@@yassin_eldeeb But documentation is the only best way to learn concepts deeply. Tutorial videos can be good as a refresher
❤❤❤
ms doesnt work on bootstrap 5, instead use ml.
same goes for me => mr
and here I was, fiddling with style.css like a donkey, for weeks.
lol, lmao even.
You, sir, are your weight worth in gold!
Everything was going well, until MarginLeft was not ml instead of ms... 😅
First 🎉🎉
Anyone in 2023??
Yo bro
Thanks a lots :)
thank you