<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 ----------> <br> <div class="container"> <div class="row"> <div class="col-md-3"></div> <div class="col-md-6"> <div class="accordion for-mobile" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <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"> <b>WEBSITES</b> </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> <nav class="nav flex-column"> <a class="nav-link" href="#">About Us</a> <a class="nav-link" href="#">Contact Us</a> <a class="nav-link" href="#">How It Works</a> <a class="nav-link" href="#">Plans & Pricing</a> <a class="nav-link" href="#">Portfolio</a> <a class="nav-link" href="#">Theme Library</a> </nav> </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> <b>MARKETING</b> </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> <nav class="nav flex-column"> <a class="nav-link" href="#">Managed SEO</a> <a class="nav-link" href="#">Pay-Per-Click (PPC) Solutions</a> <a class="nav-link" href="#">Backlink Booster</a> <a class="nav-link" href="#">Premium Blog Writing Service</a> <a class="nav-link" href="#">Contextual Link Building</a> <a class="nav-link" href="#">Visitor Retargeting</a> <a class="nav-link" href="#">Social Media Ads Management</a> </nav> </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> <b>SUPPORT</b> </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <nav class="nav flex-column"> <a class="nav-link" href="#">Free Consultation</a> <a class="nav-link" href="#">FAQs</a> <a class="nav-link" href="#">Support Center</a> <a class="nav-link" href="#">Ticket Center</a> <a class="nav-link" href="#">Contact Us</a> <a class="nav-link" href="#" target='_blank'>Client Control Panel</a> </nav> </div> </div> </div> <div class="card"> <div class="card-header" id="headingFour"> <h2 class="mb-0"> <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseThree"> <b>INFO</b> </button> </h2> </div> <div id="collapseFour" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> <nav class="nav flex-column"> <a class="nav-link" href="#">Testimonials</a> <a class="nav-link" href="#">News & Media</a> <a class="nav-link" href="#">Referral Program</a> <a class="nav-link" href="#">Affiliate Program</a> <a class="nav-link" href="#">Newsletter</a> <a class="nav-link" href="#">Contact Us</a> </nav> </div> </div> </div> </div> </div> <div class="col-md-3"></div> </div> </div>

@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"); .accordion button:before { float: right !important; font-family: FontAwesome; content:"\f068"; padding-right: 5px; } .accordion button.collapsed:before { float: right !important; content:"\f067"; } .accordion button:hover, .accordion button:active, .accordion button:focus { text-decoration:none; } .card-header .btn{ color:#000; } .nav-link{ color:#000; }