CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
dg-
dg-

Reputation: 105

Bootstrap button is overlapping text

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/[email protected]" style="border-radius: 50%;" height="80" width="80">
        <h3 style="text-align: center;">Test123</h3> <p>XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</p>
        <a href="#" class="btn btn-purple btn-sm"><i class="fa fa-sign-in" aria-hidden="true"></i> Join server!</a>
      </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.

Upvotes: 0

Views: 1364

Answers (1)

Marylyn Lajato
Marylyn Lajato

Reputation: 1171

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

Upvotes: 1

Related Questions