Bootstrap button is overlapping text - html

Question

I'm making a card/grid layout using wells in bootstrap. My problem is that the button needs to always be positioned on the bottom of the well at all times with the well having a fixed height. The button is at the bottom but is also overlapping the text.
body {
background-color: #5C67B6;
}
html,
body {
height: 100%;
padding-top: 70px;
}
.btn-purple {
color: #fff;
background-color: #5C67B6;
border-color: #5C67B6;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -140px;
}
.btn-purple:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple.active,
.open>.dropdown-toggle.btn-purple {
color: #fff;
background-color: #4b5496;
border-color: #4b5496;
}
.customClass {
width: 700px;
max-width: 100%;
margin: 0px auto;
}
.well {
min-height: 280px;
height: auto;
overflow-wrap: break-word;
word-wrap: break-word;
hyphens: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container content-sm customClass">
<div class="row">
<div class="col-sm-6 col-xs-12">
<div class="well">
<img class="center-block" src="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png" style="border-radius: 50%;" height="80" width="80">
<h3 style="text-align: center;">Test123</h3> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
<i class="fa fa-sign-in" aria-hidden="true"></i> Join server!
</div>
</div>
</div>
</div>
Make sure to click show full page. The button is overlapping some of the text. What would I need to do to make it so where the text positions itself so where it avoids contact with the button? Changing the height fixes it somewhat, but it needs to stay at this height.

Answer 1

If you wanted each of your well class height to be fixed, You need to move each of your btn-purple class outside of your well class as well. Also, To retain the look of your current layout, Place some of your css property from your well class to your col-sm-12 class (parent container)
Here is a sample jsfiddle to guide you: https://jsfiddle.net/u7ecv316/1/
Note: I've place a col-item class in col-sm-12 then place the btn-purple outside of well class. I've also override the css properties of well class too.
Hope this will guide you well