Bootstrap CSS button fixed position after text

Question

I am trying to set cards with information in columns. As the texts displayed have different lenghts, I want to fixed the possition of the Learn More button related to the end of the card, so no matter what comes before, the buttons are always aligned.

Furthermore, I want to separate the cards between rows, but I haven't been able to find a solution yet, because if I change margins it only applies in the last row.

Here is my code:

<div class="row my-flex-card">
    <div class= "col-xs-4 col-sm-4 col-md-4 col-lg-4" ng-repeat="woman in women">
        <!--Card-->
          <div class="card">
              <!--Card image-->
              <img class="img-fluid" ng-src="{{woman.image_url}}" alt="{{woman.name}}">
              <!--Card content-->
              <div class="card-body inline-block">
                  <!--Title-->
                  <h4 class="card-title">{{woman.name}}</h4>
                  <!--Text-->
                  <p class="card-text"> <h5>{{woman.field}}</h5> <br> {{woman.job}}</p>
                  <a class="btn btn-success" href="#!/women/details/{{woman._id}}">Learn more</a>
              </div>

          </div>

          <!--/.Card-->
    </div>
  </div>

My CSS:

.my-flex-card > div > div.card {
  height: calc(100% - 15px);
  margin-bottom: 15px;
}

.row {
  margin-bottom: 50px;
}

That .row feature isn't working.

This is how my website looks like right now:

Thank you :)

I would suggest having a fixed `height` value for `.card-text` instead of doing positioning. It might just be what you want. You could also use `text-overflow: ellipsis` to avoid overflows if the paragraph contains too much text. — sangeeth96, Aug 20 '17 at 18:16
I tried that but it didn't work, as it created a huge space between the title and the text and then displayed it... Besides, I want to display the whole paragraph, and it appears behind the button. — Marta Lobo, Aug 20 '17 at 18:26

score 0 · Answer 1 · answered Aug 20 '17 at 18:02

0

make the box class with position relative :

.boxClassName{
position:relative
}

then make the button class with the following :

  .buttonClassName{
    position:absolute;
    bottom:0;
    }

answered Aug 20 '17 at 18:02

Hasan Daghash

1,681
1
17
29

Thanks! It works, the buttons are alligned (not centered -.-'), but now the text continues behind them, so it looks awful – Marta Lobo Aug 20 '17 at 18:22
Set a `padding-box: 60px` or so on the `.card` to create some space. – sangeeth96 Aug 20 '17 at 18:32
Not working. Css doesn't recognise padding-box, maybe because I'm using bootstrap 4?? – Marta Lobo Aug 20 '17 at 18:35

score 0 · Accepted Answer · answered Aug 20 '17 at 19:35

.parent {
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.parent .child {
  padding-right: 10px;
  flex-grow: 1;
  width: 33%;
  position:relative;
}
.parent .child .content {
  height: 100%;
  box-shadow: 0 0 1em gray;
}
.content img{
 background-size:cover;
 width:100%;
}
.content h3,p{
padding:10px;
}
.content input{
position:absolute;
bottom:5px;
margin-left: 35%;
margin-top:10px;
}

<div class="parent">
  <div class="child">
    <div class="content">
      <div>
        <img  src="https://www.w3schools.com/html/pic_mountain.jpg"/>
        <h3> test 3</h3>
        <p>text text text text text text text text text text text text text text text text text text text</p>  
        </div>
         <div><input type="button" value="click" /></div> 
      </div>
    </div>
  <div class="child">
    <div class="content">  
       <div>
         <img  src="https://www.w3schools.com/html/pic_mountain.jpg"/>
         <h3> test 2</h3>
         <p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex </p>
        </div>
         <div><input type="button" value="click" /></div> 
     </div>
 </div>
  <div class="child">
    <div class="content">
       <div>
         <img src="https://www.w3schools.com/html/pic_mountain.jpg"/>
         <h3> test 1</h3>
         <p>text text  text text text text text text text text text text tex</p>  
       </div>
       <div><input type="button" value="click" /></div> 
    </div>
  </div>
</div>

Bootstrap CSS button fixed position after text

2 Answers2

Linked