"FAQ Section Design With Bootstrap"
Bootstrap 4.1.1 Snippet by Nabed

<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"> <div class="row"> <div class="col-md-12"> <div class="faq-section"> <h1>Frequently Asked Questions</h1> <div class="accordion" id="accordionExample"> <div class="card cstm-card"> <div class="card-header" id="headingOne"> <h2 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> How safe is Dhaka city for an Indian to travel for a week in December this year? </button> </h2> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> Smile spoke total few great had never their too. Amongst moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte connection introduced. Nay newspaper can sportsman are admitting gentleman belonging his. Is oppose no he summer lovers twenty in. Not his difficulty boisterous surrounded bed. </div> </div> </div> <div class="card cstm-card"> <div class="card-header" id="headingTwo"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseThree"> Why don't cars use a digital display to show your speed? </button> </h2> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> Smile spoke total few great had never their too. Amongst moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte connection introduced. Nay newspaper can sportsman are admitting gentleman belonging his. Is oppose no he summer lovers twenty in. Not his difficulty boisterous surrounded bed. </div> </div> </div> <div class="card cstm-card"> <div class="card-header" id="headingThree"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> What are some examples of bad design? </button> </h2> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> Smile spoke total few great had never their too. Amongst moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte connection introduced. Nay newspaper can sportsman are admitting gentleman belonging his. Is oppose no he summer lovers twenty in. Not his difficulty boisterous surrounded bed. </div> </div> </div> <div class="card cstm-card"> <div class="card-header" id="headingFour"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour"> What are some things that need to be redesigned? </button> </h2> </div> <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample"> <div class="card-body"> Smile spoke total few great had never their too. Amongst moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte connection introduced. Nay newspaper can sportsman are admitting gentleman belonging his. Is oppose no he summer lovers twenty in. Not his difficulty boisterous surrounded bed. </div> </div> </div> <div class="card cstm-card"> <div class="card-header" id="headingFive"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive"> What small thing can tell you a lot about a person? </button> </h2> </div> <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample"> <div class="card-body"> Smile spoke total few great had never their too. Amongst moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte connection introduced. Nay newspaper can sportsman are admitting gentleman belonging his. Is oppose no he summer lovers twenty in. Not his difficulty boisterous surrounded bed. </div> </div> </div> <div class="card cstm-card"> <div class="card-header" id="headingSix"> <h2 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix"> What are the 3 golden words of your life except ‘I love you'? </button> </h2> </div> <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordionExample"> <div class="card-body"> Smile spoke total few great had never their too. Amongst moments do in arrived at my replied. Fat weddings servants but man believed prospect. Companions understood is as especially pianoforte connection introduced. Nay newspaper can sportsman are admitting gentleman belonging his. Is oppose no he summer lovers twenty in. Not his difficulty boisterous surrounded bed. </div> </div> </div> </div> </div> </div> </div> </div>
.faq-section h1{ text-align:center; margin-bottom:50px; color: #0bbbc1; } .cstm-card{ margin-bottom: 10px; border: none; border-radius: 5px; } .cstm-card button{ color: #222222; font-size: 18px; font-family: 'Zilla Slab', serif; font-weight: 700; text-decoration: none !important; width: 100%; text-align: left; position: relative; } .cstm-card button:hover{ color: #0bbbc1; } .cstm-card .card-header { border: none; background-color: #fbfbfb; padding: 15px 20px; } .cstm-card .card-header h2 { display: block; } .cstm-card button:after { content: "+"; position: absolute; top: 50%; right: 1%; font-size: 20px; font-family: 'Zilla Slab', serif; font-weight: 700; line-height: 30px; margin-top: -15px; background-color: #0bbbc1; width: 30px; height: 30px; text-align: center; color: #fff; } .cstm-card button[aria-expanded="true"]:after{ content: "-"; } .cstm-card .card-body { background-color: #fbfbfb; font-size: 14px; line-height: 25px; padding: 25px; }

Related: See More


Questions / Comments: