I am new to using bootstrap. Currently, I am creating a simple FAQ page with bootstrap and facing some challenges.
https://i.sstatic.net/6fUW3.png
I have been trying to adjust the position and margin of elements, but I am struggling to center the title and arrow. Can someone assist me with this?
<style>
.faqHeader {
font-size: 27px;
margin: 20px;
}
.panel-heading [data-toggle="collapse"]:after {
font-family: 'Glyphicons Halflings';
content: "\e072"; /* "play" icon */
float: right;
color: #F58723;
font-size: 18px;
line-height: 22px;
/* rotate "play" icon from > (right arrow) to down arrow */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.panel-heading [data-toggle="collapse"].collapsed:after {
/* rotate "play" icon from > (right arrow) to ^ (up arrow) */
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
color: #454444;
}
</style>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven">How did the Self Assessment Test come about?</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse">
<div class="panel-body">
The Skill Optimiser Project Team has worked with all the Hiring Managers for the various job roles to understand the requirement based on 4 aspects: Product Knowledge, Job Expertise Knowledge/ Skills, Education/ Experience, and Competencies.
</div>
</div>
</div>