Responsive Team Accordion using Bootstrap

byCodingFlicks -August 11, 2020

0

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 We shared a blog post on Simple Accordion Design using only HTML and CSS. In this project, we will use HTML, CSS, and the latest version of Bootstrap to create the same. We have added all the necessary files required for this project file for your convenience.

Theoretically, an 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, it hides the collapsible element related to it. This Component is widely used on most websites nowadays to showcase the FAQs, Specifications, and so on of any company. Watch the video tutorial below for more details.

Video Tutorial:

For the accordion title or card header, We used some designation name examples like Chief Executive Officer, General Manager, etc. We 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 we have used for this snippet are 300px in width and 300px in height. So all the photos are square shape images.

We have given a nice-looking gradient color in the card header or the accordion to give it a professional look. We used a gradient color for the social media button background and the separator line between the name and description. We 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, we have provided four social media icons from font-awesome in div named socials. We did the same markup for the other two card-body classes.

The accordion will automatically work as we have Bootstrap for the project. We have customized it for the way it looks. We have styled some elements like social media buttons, card-header text, card-body features, etc.

To make the snippet mobile responsive, we have to make some adjustments. First, we make the image width 100%, followed by decreasing the font size of the card-header class button. Then we provided 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 from the code box and paste the code to the appropriate files, and save them. If the code doesn't work, you can download the code from the download button below this blog post.

ADD HTML:

<!DOCTYPE html>
<!-- codingflicks.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Team Accordion using Bootstrap</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    

    <div class="box-area">
		<div class="container">
			<div class="accordion" id="accordionExample">
				<div class="card">
					<div class="card-header" id="headingOne">
						<h5 class="mb-0"><button aria-controls="collapseOne" aria-expanded="true" class="btn btn-link" data-target="#collapseOne" data-toggle="collapse" type="button">Chief Executive Officer</button></h5>
					</div>
					<div aria-labelledby="headingOne" class="collapse show" data-parent="#accordionExample" id="collapseOne">
						<div class="card-body">
							<div class="row">
								<div class="col-lg-8 col-md-8">
									<h2>Sarah Brown</h2>
									<div class="line"></div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat. Lorem ipsum dolor sit amet</p>
									<div class="socials">
										<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-instagram"></i></a>
									</div>
								</div>
								<div class="col-lg-4 col-md-4"><img alt="" class="img-fluid" src="https://i.postimg.cc/x1PZsMPc/1.jpg"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header" id="headingTwo">
						<h5 class="mb-0"><button aria-controls="collapseTwo" aria-expanded="false" class="btn btn-link collapsed" data-target="#collapseTwo" data-toggle="collapse" type="button">General Manager</button></h5>
					</div>
					<div aria-labelledby="headingTwo" class="collapse" data-parent="#accordionExample" id="collapseTwo">
						<div class="card-body">
							<div class="row">
								<div class="col-lg-8 col-md-8">
									<h2>Emily Davis</h2>
									<div class="line"></div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat. Lorem ipsum dolor sit amet</p><!-- lorem55 -->
                                    
									<div class="socials">
										<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-instagram"></i></a>
									</div>
								</div>
								<div class="col-lg-4 col-md-4"><img alt="" class="img-fluid" src="https://i.postimg.cc/GtY7vy23/2.jpg"></div>
							</div>
						</div>
					</div>
				</div>
				<div class="card">
					<div class="card-header" id="headingThree">
						<h5 class="mb-0"><button aria-controls="collapseThree" aria-expanded="false" class="btn btn-link collapsed" data-target="#collapseThree" data-toggle="collapse" type="button">Human Resource Manager</button></h5>
					</div>
					<div aria-labelledby="headingThree" class="collapse" data-parent="#accordionExample" id="collapseThree">
						<div class="card-body">
							<div class="row">
								<div class="col-lg-8 col-md-8">
									<h2>Jessica Williams</h2>
									<div class="line"></div>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam doloremque dolorum exercitationem ipsum maxime minima perspiciatis soluta velit voluptate! Aspernatur corporis ex iusto nostrum pariatur recusandae reiciendis temporibus ullam. Ab architecto blanditiis, eveniet expedita, magnam non perferendis quod totam unde vel, veniam vero. Ab aperiam doloremque nam obcaecati repellat. Lorem ipsum dolor sit amet</p>
									<div class="socials">
										<a href="#"><i class="fa fa-facebook"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-linkedin"></i></a> <a href="#"><i class="fa fa-instagram"></i></a>
									</div>
								</div>
								<div class="col-lg-4 col-md-4"><img alt="" class="img-fluid" src="https://i.postimg.cc/3x3SDWH7/3.jpg"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>

ADD CSS:

body {
	background: #262626;
}
.box-area {
	padding-top: 60px;
}
.socials a {
	width: 40px;
	height: 40px;
	background: linear-gradient(90deg, #c31432, #240b36);
	display: inline-block;
	transition: .9s;
}
.socials a:hover {
	background: #000;
}
.socials i {
	color: #fff;
	padding: 12px;
}
.line {
	height: 5px;
	width: 200px;
	background: linear-gradient(90deg, #c31432, #240b36) 100%);
	margin: 20px 0;
}
.card-header {
	background: linear-gradient(90deg, #c31432, #240b36);
}
.card-body {
	background: #ddd;
}
.btn.btn-link {
	color: #fff;
	font-size: 20px;
	text-transform: uppercase;
	text-decoration: none;
}
/*responsive css*/

@media (max-width: 600px) {
	.btn.btn-link {
		font-size: 16px;
	}
	.socials {
		margin-bottom: 30px;
	}
	.card-body img {
		width: 100%;
	}
}

We hope the code is working for you. For more, please click the load more button on our homepage. Thanks for visiting the blog and keep visiting for more like this. Follow our Facebook and Twitter group to keep updated.

DOWNLOAD CODE

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