How can I place a button at the bottom-right of a container div?

January 18, 2023

How can I put this View More button in the bottom-right of the container? I am having a hard time on putting the view more button on the bottom right of the ‘back’ div.

.back {
  border: #6ACEBC 4px solid;
  margin: 0 20px;
  border-radius: 15px;
  max-width: 100%!important;
  min-height: 200px;
}

.content {
  max-width: 60%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="back">
  <div class="content">
    <div class="row ps-3 text-center">
      <div class="col">Order #</div>
      <div class="col">Order Name</div>
      <div class="col">Quantity</div>
      <div class="col">Price per pcs</div>
      <div class="col">Total Price</div>
    </div>
    <div class="row ps-3 text-center">
      <div class="col">3</div>
      <div class="col">Pencil</div>
      <div class="col">5</div>
      <div class="col">10</div>
      <div class="col">50</div>
    </div>
    <div class="float-end">
      <button><a href="#">VIEW MORE</a></button>
    </div>
  </div>
</div>

>Solution :

Use absolute positioning to place the button on the bottom right of the container. The container needs to be position: relative; to get the context of the button in the right place.

.back {
    border: #6ACEBC 4px solid;
    margin: 0 20px;
    border-radius: 15px;
    max-width: 100%!important;
    min-height: 200px;
   background-color: darkorange;
   position: relative;
}

.content {
    max-width: 60%;
  
}

button {
  position: absolute;
  bottom: 10px;
  right: 10px;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>

 <div class = "back">
       

        <div class="content">
            <div class="row ps-3 text-center">
                <div class="col">Order #</div>
                <div class="col">Order Name</div>
                <div class="col">Quantity</div>
                <div class="col">Price per pcs</div>
                <div class="col">Total Price</div>
            </div>
    
            <div class="row ps-3 text-center">
                <div class="col">3</div>
                <div class="col">Pencil</div>
                <div class="col">5</div>
                <div class="col">10</div>
                <div class="col">50</div>
            </div>

            <div class = "float-end">
                <button><a href="#">VIEW MORE</a></button>
            </div>
        </div>
       

    </div>