Bootstrap 5 Crash Course Tutorial #10 - Cards

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ก.ย. 2024
  • 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

ความคิดเห็น • 49

  • @themoroccanpianist8953
    @themoroccanpianist8953 3 ปีที่แล้ว +7

    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
      @espinhudobr 2 ปีที่แล้ว

      .

    • @Zeruhur
      @Zeruhur 2 ปีที่แล้ว +2

      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
      @themoroccanpianist8953 2 ปีที่แล้ว

      @@Zeruhur thanks

  • @haudangnguyentien1131
    @haudangnguyentien1131 8 หลายเดือนก่อน +2

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

  • @niquebon
    @niquebon 2 ปีที่แล้ว +8

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

  • @chigozieozoh3207
    @chigozieozoh3207 5 หลายเดือนก่อน +1

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

  • @realdaly
    @realdaly ปีที่แล้ว +1

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

  • @gopalmandloi6374
    @gopalmandloi6374 3 ปีที่แล้ว +8

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

    • @NetNinja
      @NetNinja  3 ปีที่แล้ว +5

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

  • @iancarr3923
    @iancarr3923 ปีที่แล้ว +2

    An excellent series.

  • @josephbangalie001
    @josephbangalie001 ปีที่แล้ว +1

    Learning a lot from you, Keep the good job Boss

  • @devdesai537
    @devdesai537 3 ปีที่แล้ว +3

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

  • @kopilkaiser8991
    @kopilkaiser8991 10 หลายเดือนก่อน

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

    • @NetNinja
      @NetNinja  10 หลายเดือนก่อน

      That means a lot, thank you! :)

  • @xiaonaiheme
    @xiaonaiheme 2 ปีที่แล้ว

    This is best tutorial now it seems

  • @apurvarohithegde4544
    @apurvarohithegde4544 3 ปีที่แล้ว +2

    Love it😃😃😃

  • @BrantScalan
    @BrantScalan ปีที่แล้ว

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

  • @lyssilva5243
    @lyssilva5243 2 ปีที่แล้ว +1

    me encantó, muy bien explicado

  • @blackpurple9163
    @blackpurple9163 ปีที่แล้ว

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

    • @NetNinja
      @NetNinja  ปีที่แล้ว +1

      Great to hear! :) thanks

  • @ronilpatel2294
    @ronilpatel2294 3 ปีที่แล้ว +1

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

  • @prafulrane3591
    @prafulrane3591 ปีที่แล้ว

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

  • @lilliesan
    @lilliesan 2 ปีที่แล้ว

    Thank you very much.

  • @richardmartyns7978
    @richardmartyns7978 ปีที่แล้ว

    I am loving this

    • @NetNinja
      @NetNinja  ปีที่แล้ว +1

      Glad to hear that Richard!

    • @richardmartyns7978
      @richardmartyns7978 ปีที่แล้ว

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

  • @briannguyen5057
    @briannguyen5057 2 ปีที่แล้ว

    very helpful, thx!

  • @NullStaticVoid
    @NullStaticVoid 3 ปีที่แล้ว +1

    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
      @antoniofuller2331 3 ปีที่แล้ว +1

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

  • @itojesamuel9032
    @itojesamuel9032 ปีที่แล้ว

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

    • @NetNinja
      @NetNinja  ปีที่แล้ว

      Glad to hear that :) thanks for watching

  • @hamzehqatash6256
    @hamzehqatash6256 2 ปีที่แล้ว

    Amazing 🖤️

  • @salahalhashmi6528
    @salahalhashmi6528 3 ปีที่แล้ว

    thanks

  • @ridl27
    @ridl27 3 ปีที่แล้ว

    ty

  • @iancarr3923
    @iancarr3923 ปีที่แล้ว

    Thanks!

    • @NetNinja
      @NetNinja  ปีที่แล้ว

      Thanks for your support Ian :) it means a lot

  • @vuelancer
    @vuelancer 3 ปีที่แล้ว

    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
      @NetNinja  3 ปีที่แล้ว +2

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

  • @NathiCode
    @NathiCode 9 หลายเดือนก่อน

    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

  • @Dexter101x
    @Dexter101x 3 ปีที่แล้ว

    How do you style bootstrap other than the default?

    • @NetNinja
      @NetNinja  3 ปีที่แล้ว +4

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

  • @HomelessDeamon
    @HomelessDeamon 3 ปีที่แล้ว

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

  • @ismailidrisabdullahi4642
    @ismailidrisabdullahi4642 3 ปีที่แล้ว

    Second, love your content

  • @zeadashraf524
    @zeadashraf524 2 ปีที่แล้ว

    #Net_Ninja_gang
    #Ninja_creed

  • @Mr_AWP
    @Mr_AWP 3 ปีที่แล้ว

    First

    • @Mr_AWP
      @Mr_AWP 3 ปีที่แล้ว +1

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

  • @corbindallas831
    @corbindallas831 ปีที่แล้ว

    I am now a ninja