Responsive Team Accordion using Bootstrap

Responsive Team Accordion using Bootstrap

Hello Visitor, Today, in this blog, we'll learn how to create a Responsive Team Accordion using HTML CSS and Bootstrap. Earlier I have shared a blog on Simple Accordion Design using only HTML and CSS. In this project, we will use HTML, CSS, and the latest version of Bootstrap. I have added all the necessary files required for this project below for your convenience. You have to add these files to the appropriate places on your HTML file.

Theoretically, accordion is a perpendicular list of titles. Whenever someone clicks on the title header, it reveals the information or the collapsible element associated with it at the bottom of the title. Again when clicking on the header title, then it hides the collapsible element related to it. This Component is widely used in most websites nowadays to showcase the FAQs, Specifications, and so on of any company.


For the accordion title or card header, I used some designation name examples like Chief Executive Officer, General Manager, etc. I have taken some random names, dummy text as description, and some social media icons from font awesome for the information or the card body section. The images I have used for this snippet are 300px in width and 300px in height. So all the photos are square shape images.

I have given a nice looking gradient color in the card header or the accordion to give it a professional look. I used a bluish gradient color for the social media button background color and the separator line between the name and description.  I have used bootstrap grid column classes to make the image and information of that image remain right and left side of the card body. After the name and some info text, I have provided four social media icons from font-awesome in div named socials. I did the same markup for the other two card-body classes despite changing the name.

 The accordion will automatically work as we have Bootstrap four for the project. We will customize it with some necessary changes in styling some elements like social media buttons, card-header text, card-body features, etc.

For making the snippet mobile responsive, we have to make some adjustments in styling for some elements. We will first make the image width 100%, followed by decreasing the font size of the card-header class button. Then we will provide a margin-bottom value for the socials class so that they maintain a 30px distance in the mobile view.

You may also like:
Responsive Team Accordion using Bootstrap (Source Code):

To create this snippet, you need to copy the HTML and CSS code and paste the code to the appropriate files and save them.

REQUIRED FILES:



HTML:




CSS:




I hope you like the project. Thanks for visiting the blog and keep visiting for more like this. Follow our Facebook and Twitter group page to keep updated.

Please do not enter any spam link in the comment box.

Post a Comment

Please do not enter any spam link in the comment box.

Post a Comment (0)

Previous Post Next Post