Accordion in Bootstrap 5 (with dark mode)

Поделиться
HTML-код
  • Опубликовано: 6 фев 2025
  • The accordion by default is fairly straightforward, but fairly dull to look at. Here's how to implement the Accordion in Bootstrap 5 and to make it look really good.
    Purchase & Download the source code:
    adwc.dev/produ...
    - - - - -
    ⤵ Download ALL of my source codes & more!
    Introducing ADWC PRO
    pro.adesignerw...
    ADWC Pro provides you with:
    • Access to all the source codes for ALL projects
    • Bootstrap Bootstrap online course (retail $79) w/ supplied source code
    • All future online courses (Gatsby v5 course coming soon)
    • Updates of ADWC and the web dev business
    • and more!
    Price:
    Just $6/mo. or $49/year (32% off monthly)
    -------
    Got a question for me?
    adesignerwhoco...

Комментарии • 24

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

    Brilliant video and as always, so well explained! Thank you!

  • @harukananase9568
    @harukananase9568 Год назад

    Thank you! It really helpful!

  • @userozancinci
    @userozancinci Год назад

    It is quite helpful!

  • @thaispaiva5046
    @thaispaiva5046 2 года назад +1

    this was very helpful, thanks so much. for some reason, the changes I made in the classes only worked when I used !important , which I don't entirely understand yet, but it worked :)

    • @haydn-co
      @haydn-co  2 года назад +3

      Make sure your custom css comes after the bootstrap css in the head section.

    • @thaispaiva5046
      @thaispaiva5046 2 года назад +1

      @@haydn-co you're absolutely right, of course! such a rookie mistake - because I am indeed a rookie, I'm a self-taught coder taking her very first steps into web dev. as such, your videos are much appreciated, they've been a great help! thanks also for taking the time to answer to my comment :)

    • @haydn-co
      @haydn-co  2 года назад +3

      Oh I've made plenty of "rookie" mistakes throughout my time coding. I just recorded a video yesterday where I misspelled a class name and wondered why it didn't work (and left it in the video). That's how we learn. By making mistakes. We analyze, scratch our heads, and eventually figure it out. Stoked you got it working! You're so welcome.

    • @thaispaiva5046
      @thaispaiva5046 2 года назад

      @@haydn-co funny how we take mistakes so personally when we're fresh into a new skill or activity, and then, as we get more experienced, they kinda stop affecting us that much. may we all just shrug them off and learn from them as much as possible :)

    • @TheirSavior
      @TheirSavior Год назад

      hey !important fixed my issue
      the order of my stylesheets appear to be correct, but my react project's components are probably loading styles in an unexpected order
      thanks for sharing!

  • @MsSamuel67
    @MsSamuel67 2 года назад

    Appreciate this video! Thank you so much!

  • @jesustoxqui4215
    @jesustoxqui4215 2 года назад

    that's help me, thank you, nice video

  • @sarasalas537
    @sarasalas537 3 года назад

    Excellent video, I am so grateful

    • @haydn-co
      @haydn-co  3 года назад

      You're welcome Sara. Happy to help!

  • @aleksandrawojcik2507
    @aleksandrawojcik2507 3 года назад

    Thank you, my problem is already solved 👍👍👍🥰

  • @joansalan2079
    @joansalan2079 2 года назад

    It's very useful! Thanks!

  • @pramodghodke8005
    @pramodghodke8005 2 года назад

    Huge Huge thanks to you...❤️..please bring more content on react-boostrap too.. lot of people adding it to project 🔥🔥

    • @haydn-co
      @haydn-co  2 года назад

      More coming! Go back and forth between React Bootstrap and Vanilla Bootstrap. The great part is that Vanilla works fine within React Bootstrap.

  • @frontend-trickss
    @frontend-trickss 2 года назад

    not found in my email

  • @techkenya2
    @techkenya2 Год назад

    How can I make it wholly dark mode?

  • @jonatan0867
    @jonatan0867 3 года назад

    hi! how do u get the accordion collapse smoother? cause I have tried everything and nothing works :(

    • @haydn-co
      @haydn-co  3 года назад +2

      You could set an ease in/ease out in CSS.

  • @itsmepelotuda9369
    @itsmepelotuda9369 2 года назад +1

    My accordion opens but doesnt closeee what is the problem pls?