Bootstrap 5 Crash Course Tutorial #10 - Cards

Hey gang, in this Bootstrap tutorial you'll learn how to use the Card component - in our site we'll use it for te pricing options.
🐱‍👤 View this course in full now - without ads - on Net Ninja Pro:
netninja.dev/p...
🐱‍💻 Access the course files on GitHub:
github.com/iam...
🐱‍💻 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.visualstu...
🐱‍💻 Bootstrap 5 Docs - getbootstrap.c...
🐱‍💻 Social Links:
Facebook - / thenetninjauk
Twitter - / thenetninjauk
Instagram - / thenetninja

[@gopalmandloi6374]

Great content Shaun as always. Any plans for making series about Accessibility ?

[@NetNinja]

Thanks. And no plans yet, but something I might look at :)

[@josephbangalie001]

Learning a lot from you, Keep the good job Boss

[@kopilkaiser8991]

Subscribed. I liked your videos that much. You are far the best tutor in KZbin. Absolute perfect lecture to learn smoothly 😊⭐️⭐️⭐️⭐️⭐️

[@NetNinja]

That means a lot, thank you! :)

[@iancarr3923]

An excellent series.

[@themoroccanpianist8953]

I don't understand this part of the html . Here, 8+9 +8 = 25. Whereas the total that we can specify is 12 columns in a single row ! could you explain ?

[@espinhudobr]

.

[@Zeruhur]

col-8 is relative at the single card, that's why the biggest card is size 9 (out of 12) and the other two are size 8. Just play a bit with that to see the difference

[@themoroccanpianist8953]

@@Zeruhur thanks

[@realdaly]

The "border-2" class of the middle card didn't work for me until I added "border" class to it as well.

[@xiaonaiheme]

This is best tutorial now it seems

[@chigozieozoh3207]

Hi! well done. I am having challenge with centralizing the card using align-items-center. this line of code didnt centeralize d card

[@blackpurple9163]

Very good video, understood every bit of it, thanks a lot

[@NetNinja]

Great to hear! :) thanks

[@ronilpatel2294]

Sir, great content(bootstrap) ever seen on youtube ....any plan for java script in one video?

[@antoniofuller2331]

JavaScript is good, but NO

[@richardmartyns7978]

I am loving this

[@NetNinja]

Glad to hear that Richard!

[@richardmartyns7978]

@@NetNinja Please can we use bootstrap 5 with react?

[@briannguyen5057]

very helpful, thx!

[@BrantScalan]

Do you have any examples of a single form across multiple tab elements in bootstrap with validation?

[@hamzehqatash6256]

Amazing 🖤️

[@itojesamuel9032]

great content sir..... i Really appreciate it

[@NetNinja]

Glad to hear that :) thanks for watching

[@iancarr3923]

Thanks!

[@NetNinja]

Thanks for your support Ian :) it means a lot

[@salahalhashmi6528]

thanks

[@Dexter101x]

How do you style bootstrap other than the default?

[@NetNinja]

You can install BS using npm & then customize using SASS. I will show you how to do that later in this course :)

[@zeadashraf524]

#Net_Ninja_gang #Ninja_creed

[@Mr_AWP]

First

[@Mr_AWP]

Well i didn't even watch the video... Don't make fun of me. It just my reflex action that wrote this comment.

[@corbindallas831]

I am now a ninja

[@niquebon]

Learning a lot from this series. Great tutorials! Easy to understand

[@haudangnguyentien1131]

Thank you for the very detailed and easy-to-understand lecture. I thought Bootstrap was so vast and complicated until I watched your lectures.

[@devdesai537]

Hey Do you ever plan on making a Flask/ Django/ Fast API tutorial?

[@apurvarohithegde4544]

Love it😃😃😃

[@NullStaticVoid]

Maybe I'm a little slow, but HTML never has had a problem with making a plain box. I don't get why 'cards' are suddenly a thing.

[@antoniofuller2331]

You poor thing. You probably never played Yu-Gi-Oh

[@lyssilva5243]

me encantó, muy bien explicado

[@NathiCode]

Teacher iam from Ethiopia Africa i am struggling to become full stack developer but there is a shortage of money 😢 but i am watching your video to become full stack developer

[@HomelessDeamon]

😊👍👍👍👍👍👍👍👍🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊thanks a lot

[@prafulrane3591]

Need a roadmap video to follow your channel content!!!!

[@leonmarienga3293]

Thank you

[@NetNinja]

You're welcome!

[@vuelancer]

This is out of bootstrap, but I have this doubt related to css. Ok, If I want to do bootstrap clone for padding, margin and few others that has 0 to 6 class (mx-0,mx-1,...,mx-6). And instead of creating definitions in css by defining all classes, I want to have mx-[number]{ margin-top:number;} Does css has this trick? Or sass?

[@NetNinja]

You can use a loop in sass to generate classes this way, by looping through a map of values for margin. I'll be doing a complete sass course in the future that explains this kind of thing :).

[@lilliesan]

Thank you very much.

[@ismailidrisabdullahi4642]

Second, love your content

[@ridl27]

ty