CODEWITHSUNDEEP
cssbootstrap-4
Sugitime
Sugitime

Reputation: 1888

Bootstrap - Fix Div to bottom of div

I have a div, and in that div, I have another div. I am trying to pin the inner div to the bottom of the outer div using specifically bootstrap classes, but I cant seem to find a bootstrap method to do this. I've also tried using just regular CSS, but cant get this working. I tried veritical-align: bottom; and setting the position to absolute.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
  <ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
    <li>stuff</li>
  </ul>
  <div>
    <button type="button" class="btn btn-outline-primary">Edit</button>
    <button type="button" class="btn btn-outline-primary">Delete</button>
  </div>
</div>

Upvotes: 1

Views: 6479

Answers (2)

WebDevBooster
WebDevBooster

Reputation: 14954

To get it done using Bootstrap 4 classes, you just add the classes d-flex flex-column to the card-body and then add the mt-auto class (margin-top:auto) to the inner div like so: 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="card-body d-flex flex-column">
    <ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
        <li>stuff</li>
    </ul>
    <div class="mt-auto">
        <button type="button" class="btn btn-outline-primary">Edit</button>
        <button type="button" class="btn btn-outline-primary">Delete</button>
    </div>
</div>

That will always keep the inner div pinned to the bottom.

Upvotes: 3

Dhaval Jardosh
Dhaval Jardosh

Reputation: 7299

Is this what you are trying to achieve??

.card-body {
  border: 4px solid blue;
  position: relative;
}

.inner {
  border: 4px solid red;
  position: absolute;
  bottom: -50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="card-body">
  <ul class="list-unstyled mt-3 mb-4" style="text-align: left;">
    <li>stuff</li>
  </ul>
  <div class="inner">
    <button type="button" class="btn btn-outline-primary">Edit</button>
    <button type="button" class="btn btn-outline-primary">Delete</button>
  </div>
</div>

Upvotes: 0

Related Questions