Question 43115 in Html Question posted in
Some basic documentation can be found here.

Position the edit & delete button on the right of card – Html

I want to place the edit & delete buttons on the same line as the image & premise name. The edit & delete buttons should be on the right & size should be the same size as the card. It now looks like this:

enter image description here

It should look like this:

enter image description here

.card-content {
  display: flex;
  align-items: center;
  position: relative;
}
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<div class="px-md-5 px-4">
  <a class="anchor-fake" onclick="MovingIn()">
    <div class="block block--light block--cardShadow mb-md-4 mb-2">
      <div class="card-content">
        <div class="mr-3">
          <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
        </div>
        <div class="card-text-20-14-400">
          @premise.PremiseNickname
        </div>
      </div>
      <div class="btn-group">
        <input class="btn btn-secondary btn-lg" type="button" value="Edit">
        <input class="btn btn-danger btn-lg" type="button" value="Delete">
      </div>
    </div>
  </a>
</div>
Tags:

4

Answers


  1. 0 
    .card-content {
    display: flex;
    align-items: center;
}
    <div class="px-md-5 px-4">
  <a class="anchor-fake" onclick="MovingIn()">
    <div class="block block--light block--cardShadow mb-md-4 mb-2">
      <div class="card-content">
        <div class="mr-3">
          <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
        </div>
        <div class="card-text-20-14-400">
          @premise.PremiseNickname
        </div>
        <div class="btn-group">
          <input class="btn btn-secondary btn-lg" type="button" value="Edit">
          <input class="btn btn-danger btn-lg" type="button" value="Delete">
        </div>
      </div>
    </div>
  </a>
</div>
    Login or Signup to reply.
  2. 0

    Apply the below CSS for solving your issue.

    .card-content {
  display: flex;
  position: relative;
}

.card-content .btn-group {
  display: flex;
}

.card-content .btn-group > * {
  flex-shrink: 0;
}

.card-text-20-14-400 {
  background: white;
  display: flex;
  align-items: center;
}

.card-content img {
  width: 50px;
}

.btn-secondary.btn-lg {
   border-radius: 0;
}
    Login or Signup to reply.
  3. 0

    add float-end to the <div class="btn-group">

    <div class="btn-group float-end">

    DOCs: https://getbootstrap.com/docs/5.0/utilities/float/

    Login or Signup to reply.
  4. 0

    You just need to add the class d-flex to the right container. The container that wraps both the buttons container and the rest:

    <!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">


<!-- Body -->
<div class="px-md-5 px-4">
  <a class="anchor-fake" onclick="MovingIn()">
    <div class="d-flex gap-3 block--light block--cardShadow mb-md-4 mb-2">
      <div class="card-content d-flex align-items-center">
        <div class="mr-3">
          <img src="~/assets/img/hmo-connectmyhome-home-icon.svg" />
        </div>
        <div class="card-text-20-14-400">
          @premise.PremiseNickname
        </div>
      </div>
      <div class="btn-group">
        <input class="btn btn-secondary btn-lg" type="button" value="Edit">
        <input class="btn btn-danger btn-lg" type="button" value="Delete">
      </div>
    </div>
  </a>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search