I have a bootstrap panel and need a button right-aligned and vertically-centered in the panel - I'm stumped. I'm working in Laravel 5.5 PHP on XAMPP.
I can right-align it but it sticks to off the bottom right corner. I have tried many suggestions here to vertically align it, but anytime I succeed with the vertical alignment I lose the right-alignment. I have tried text-align:right instead of float:right, I've tried display:inline-block, display:flex and align-self:center, all to no avail.
Here's my code that right-aligns, but the button is placed to the bottom and partially outside of the panel.
<div class="col-md-6">
<div class="panel panel-default" >
<div class="panel-heading" style="background-color:#f37735;color:white"><h3><b>Employment History</b></h3>
<button class="btn btn-primary" type="button" style="float:right;" data-toggle="collapse" data-target="#collapseEmployment" aria-expanded="false" aria-controls="collapseEmployment">
Show Items
</button>
</div> .....
Here's a pic of what I have. The red arrow is where I need to place the button. button placement Any and all suggestions are most welcome - thanks.
just put the button inside the header.
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#f37735;color:white"><h3><b>Employment History</b>
<button class="btn btn-primary btn-sm" type="button" style="float:right;" data-toggle="collapse" data-target="#collapseEmployment" aria-expanded="false" aria-controls="collapseEmployment">
Show Items
</button>
</h3>
</div>
</div>
</div>