Bootstrap 5 Crash Course Tutorial #11 - Accordions

In this Bootstrap tutorial we'll look at one of the new components of Bootstrap 5 - the accordion component.
🐱‍👤 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

[@deldridg]

My dad was great on the accordion. This is my way of carrying on the fine tradition! *boom tish!*

[@walkinInst1nct]

This is an awesome tutorial to explain bootstrap the easy way! 👍🏼 Good work I appreciate it

[@NetNinja]

Glad it helped! :) thanks

[@w0mblemania]

This is an excellent series, thank you.

[@The-Sentinel]

what visual code plugin are you using to short hand type all that html and css classes by using the periods? or the lorem ipsum shortcuts?

[@adolfocastelo2752]

its built into vscode, you don't need a plugin

[@albertobarreraaponte6969]

Hi! You don't have to install anything that's emmet abbreviation. Is built into VScode

[@joefairplay2837]

This is the first part in the series that required JS but you did not mention or install it in the head or footer.

[@priyadarshanarunainathan9541]

yes. can you help me with js code

[@thetowerfantasymusic]

I miss the "hhhuuuuaaaaaaaaaa" ninja sound

[@davebudah]

You not the only one ,

[@NetNinja]

It might make a return some time...

[@prafulrane3591]

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

[@hamzehqatash6256]

Amazing ! 🖤️

[@wckd3890]

do you have any idea why mine doesn't work? i've followed the same code. perhaps you could help me. thank you

[@shoujojosei6705]

make sure u use the right getting started template for bs5

[@daniborisov5957]

Thank you!

[@AxxionMarketPlace-iu6ri]

Thank you

[@sankyawsan2503]

I tried my best but that accordion button doesn't work in this vedio lesson I understood almost all of the code in this lesson I tried 2 days but in vain. please suggest me. where could I wrong?

[@hasibulmahfuz]

what can i do if i need more accodian ?

[@rock-ylee2159]

well explained

[@DejanPavlovic-tu8vj]

hahaha total waste space of your mind :) hahaha Thanks Shaun,i really respect you,you are helping me to learn for already 4 full months... Thank you,thank you,thank you

[@NetNinja]

Thanks for your support Dejan :)

[@faisalahmad100]

Thank you so much..sir

[@alexshepel9387]

nice!

[@elijahwasserman]

yaay

[@TheBull06]

"you don't need to remember these classes."- Sure bob...

[@manishkumarr300]

you ask us not to waste our time memorizing these classes, which is pointless, but we are asked to write the code on paper during exams.shit life

[@HomelessDeamon]

Keep going broooo

[@dontbescaredtohelp]

Does anyone know how to alter the on the tabs or the accordions when they show active. I want to get rid of the blue background color when the accordion is active. If anyone know I would in great gratitude.

[@arnab_x24]

just use your own css using bootstraps provieded class and id and override their default

[@BijouBakson]

This is very useful. I know it's 2 years ago but if you are still having trouble with navigating VSC, use the arrow on the left to close a particular section/paragraph/div/ etc. Thank you very much for your work.

[@yasminesellami5411]

i wrote the same code but when i click on the accordion-button to hide the body it doesn't work!any solution please?

[@fedewoodward4216]

probably you need js

[@priyadarshanarunainathan9541]

@@fedewoodward4216 can you help with that js code

[@fedewoodward4216]

@@priyadarshanarunainathan9541 You have 2 options to use bootstrap, install with npm or use cdn. cdn is fast way (and what i use normally) to use cdn You have to copy 2 things in Your index.html the link in the head. and a script in the bottom of body (always in the bottom) these 2 codes are on the oficial web of bootstrap, "introduction" section. for js copy the bundle one, not separate. you don't need for now

[@lurkingshiba5688]

@@fedewoodward4216 thank u this helped me a lot

[@fedewoodward4216]

@@lurkingshiba5688 finally i'm that random guy who write a think and months later somebody read and solve a problem lol

[@leandromarquez9257]

Anyone knows why putting a form inside an accordion breaks it?

[@anirudhkp7923]

check if uve put ur properly

[@richardmartyns7978]

Bootstrap 5 is really interesting

[@RadeonVector]

10:15 shouldn't aria-controls="chapter-3"? maybe it doesn't matter

[@ridl27]

But is it a new component !? I mean they just finally started to call it properly (lol) and created separate component section :))

[@somnathroy8803]

Sir My problem is when click on accordion then its show body but its not closed??

[@AnnelineNombeko]

got confued with the divs but its beautifull,thank you

[@MatheusSilva-qm3ph]

👍👏

[@anandca4096]

Hey bro how u doin

[@TheBull06]

I feel like everyone here just pretends to agree they know what is going on and they really gonna remember all this.

[@richardmartyns7978]

You don't need to memorize them. Just use the docs if ever u need them

[@TheBull06]

@@richardmartyns7978 yeah sure whatever you say.

[@gamereactz]

@@TheBull06 are you like 9?