CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-4
S.Stevens
S.Stevens

Reputation: 418

Aligning an item to the end of a responsive card, with vertical centering

I am attempting to align an item, in this case a Font Awesome icon, to the end of a responsively sized card (width wise). I am struggling to get this to work. Here is my html for my card:

<div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
        <div class="card-body">
            <h4 class="card-title">Card Title</h4>
            <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
            <i class="fas fa-chevron-right fa-3x align-self-center"></i>
        </div>
    </a>
</div>

As you can see the chevron does not remain at the end of the card. Any help appreciated, thanks.

Here is what I want it to look like: enter image description here

Upvotes: 0

Views: 725

Answers (3)

Chris Morgan
Chris Morgan

Reputation: 81

UPDATE!

Add absolute positioning, set top to 50% and transform Y to -50% to account for height of icon

.mycard {
  flex-direction: row!important;
}


/*this attempted solution does not seem to work*/

.chevron {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: transformY(-50%);
}
<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
        <i class="fas chevron fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </div>
</div>

Upvotes: 1

Ahmed Moayad AlMoghrabi
Ahmed Moayad AlMoghrabi

Reputation: 1277

Best way I think to do this is like this:

a bit change on HTML structure, just pulled the icon outside the car-body div

<div class="container">
    <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
    <div class="card mt-4 mycard">
        <a href="#" style="text-decoration: none; color: inherit">
            <div class="card-body">
                <h4 class="card-title">Card Title</h4>
                <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
            </div>
            <i class="fas fa-chevron-right fa-3x align-self-center"></i>
        </a>
    </div>
</div>

CSS

<style>
    i {
        position: absolute;
        top: 50%;
        right: 20px;
        transform: translate(0,-50%);
    }
    .card-body {
        padding-right: 50px;
    }
</style>

Upvotes: 1

johannchopin
johannchopin

Reputation: 14863

You can push it to the end using margin-left: 100%:

.mycard {
  flex-direction: row!important;
}

.fa-chevron-right {
  margin-left: 100%;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="container">
  <h2 style="margin-bottom: 3rem; margin-top: 1rem;">Align right in Bootstrap 4</h2>
  <div class="card mt-4 mycard">
    <a href="#" style="text-decoration: none; color: inherit">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <p class="card-text">Description of card, chevron should be at the end of the card, vertically centred even when card width increases</p>
        <i class="fas fa-chevron-right fa-3x align-self-center"></i>
      </div>
    </a>
  </div>
</div>

Upvotes: 0

Related Questions