Bootstrap 4 Accordion Design

Hello friends, in this project, we will learn how to create an accordion using HTML CSS and bootstrap 4. we can use this accordion as a snippet to introduce the team member of a company. I have shared many snippets based on CSS animation examples, javascript, and bootstrap in this blog. Please make sure to check those as well. For this snippet, please follow the below tutorial for a better understanding.

I hope you watched the video and got the basic coding behind it. In each collapsible card header, I have included the designation of the person. I have included the image on the right side and information about that person in the card body part, including a social media link on the left side. Without further explanation, I am providing the code below.

ADD HTML

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
    <meta charset="UTF-8">
    <title>Bootstrap 4 Accordion</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    
    <div class="container">
  <div class="row">
    <div class="col-lg-12">
      <h2 class="text-center sec-header">Our Team</h2>
    </div>
  </div>
</div>

<div class="container">
  <div class="accordion" id="accordionExample">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Chief Executive Officer
          </button>
        </h5>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
        <div class="card-body">
          <div class="row">
            <div class="col-lg-8 col-md-8">
              <h2>Megan Fox</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, 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.</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-pinterest"></i></a>
              </div>
            </div>
            <div class="col-lg-4 col-md-4">
              <img src="https://i.postimg.cc/Mpgp2ZmK/1.jpg" alt="" class="img-fluid">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            General Manager
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
        <div class="card-body">
          <div class="row">
            <div class="col-lg-8 col-md-8">
              <h2>Jessica Alba</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, 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.</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-pinterest"></i></a>
              </div>
            </div>
            <div class="col-lg-4 col-md-4">
              <img src="https://i.postimg.cc/dt1shZWV/2.jpg" alt="" class="img-fluid">
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="card">
      <div class="card-header" id="headingThree">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
            Human Resource Manager
          </button>
        </h5>
      </div>
      <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
        <div class="card-body">
          <div class="row">
            <div class="col-lg-8 col-md-8">
              <h2>Mila Kunis</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, 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.</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-pinterest"></i></a>
              </div>
            </div>
            <div class="col-lg-4 col-md-4">
              <img src="https://i.postimg.cc/Y9MkMvGk/3.jpg" alt="" class="img-fluid">
            </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: #5b5b5b;
}
.sec-header{
  color: #fff;
  margin-top: 25px;
}
.socials a {
  width: 40px;
  height: 40px;
  background: #000;
  display: inline-block;
}
.socials i {
  color: #fff;
  padding: 12px;
}
.line {
  height: 2px;
  width: 200px;
  background: #AE0F86;
  margin: 20px 0;
}
.card-header {
  background-color: #AE0F86;
}
.btn.btn-link {
  color: #fff;
  font-size: 20px;
  text-transform: uppercase;
  text-decoration: none;
}

I hope you have created your version of the snippet. Thank you for visiting the blog.

Post a Comment

Post a Comment

About Us

Contact Form

Bootstrap 4 Accordion Design

You might like

Post a Comment

Post a Comment

Contact Form