To deal with this kind of problem, add borders to the involved element, that will provide you the information of their position and you will get the idea what is wrong.
Instead of having "button/link" absolute and bottom, make the wrapper(check div with class .place-bottom
) absolute, and with width:100% and use .text-center
to have button/link center inside the wrapper div.
.box-badge-orange {
background-color: orange;
position:relative;
height:30em;
}
.box-badge-orange .place-bottom {
position: absolute;
bottom: 10px;
border:1px solid black;
width:100%
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="box-badge-orange">
<h2>Title Here</h2>
<p class="text-center">Lorem ipsum</p>
<div class="place-bottom text-center">
<a class="btn btn-primary btn-lg"
href="/providers/physician-network/about/Pages/Leadership.aspx">
Click here
</a>
</div>
</div>