<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 ----------> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <div class="row align-items-center no-gutters"> <div class="col-auto"> <i class="bi bi-server block"></i> </div> <div class="col"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Published Site Report Recos Trade Store Regcheck Fo Controls Fi BNZ </button> </h2> </div> </div> </div> <div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class. </div> </div> <div class="card-footer border-0"> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo"> Collapsible Group Item #2 </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class. </div> </div> </div> </div> </div> </div>

.bi { font-size: 2rem; }