Bootstrap 4 Accordion ( Source Code )

Bootstrap 4 Accordion ( Source Code )

Add these files first

<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">


HTML


<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>


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; }