<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <!-- For demo purpose --> <div class="row py-5"> <div class="col-lg-9 mx-auto text-white text-center"> <h1 class="display-4">Bootstrap 4 accordion</h1> <p class="lead mb-0">Using Bootstrap 4 card component, build a vertical accrodion with up & down chevrons.</p> <p class="lead">Snippet by <a href="https://bootstrapious.com/snippets" class="text-white"> <u>Bootstrapious</u></a> </p> </div> </div><!-- End --> <div class="row"> <div class="col-lg-9 mx-auto"> <!-- Accordion --> <div id="accordionExample" class="accordion shadow"> <!-- Accordion item 1 --> <div class="card"> <div id="headingOne" class="card-header bg-white shadow-sm border-0"> <h2 class="mb-0"> <button type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="btn btn-link text-dark font-weight-bold text-uppercase collapsible-link">Collapsible Group Item #1</button> </h2> </div> <div id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample" class="collapse show"> <div class="card-body p-5"> <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div><!-- End --> <!-- Accordion item 2 --> <div class="card"> <div id="headingTwo" class="card-header bg-white shadow-sm border-0"> <h2 class="mb-0"> <button type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" class="btn btn-link collapsed text-dark font-weight-bold text-uppercase collapsible-link">Collapsible Group Item #2</button> </h2> </div> <div id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample" class="collapse"> <div class="card-body p-5"> <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div><!-- End --> <!-- Accordion item 3 --> <div class="card"> <div id="headingThree" class="card-header bg-white shadow-sm border-0"> <h2 class="mb-0"> <button type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree" class="btn btn-link collapsed text-dark font-weight-bold text-uppercase collapsible-link">Collapsible Group Item #3</button> </h2> </div> <div id="collapseThree" aria-labelledby="headingThree" data-parent="#accordionExample" class="collapse"> <div class="card-body p-5"> <p class="font-weight-light m-0">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.</p> </div> </div> </div><!-- End --> </div><!-- End --> </div> </div> </div>

/* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== * */ .collapsible-link { width: 100%; position: relative; text-align: left; } .collapsible-link::before { content: '\f107'; position: absolute; top: 50%; right: 0.8rem; transform: translateY(-50%); display: block; font-family: 'FontAwesome'; font-size: 1.1rem; } .collapsible-link[aria-expanded='true']::before { content: '\f106'; } /* * * ========================================== * FOR DEMO PURPOSES * ========================================== * */ body { background: #654ea3; background: -webkit-linear-gradient(to left, #654ea3, #eaafc8); background: linear-gradient(to left, #654ea3, #eaafc8); min-height: 100vh; }