Bootstrap-3 Align Links and Buttons at The Bottom of a Div

bootstrap-3 align links and buttons at the bottom of a div

I solved it. See the new screenshot. I did it by adding 3 different css classes: bottomaligned, bottomright and bottomleft, so each link now has a different css class.

  .bottomaligned {position:absolute; bottom:0;  margin-bottom:7px; left: 0;}
  .bottomright {position:absolute; bottom:0;  margin-bottom:7px; margin:7px; right: 0;}
  .bottomleft {position:absolute; bottom:0;  margin-bottom:7px; left: 100px;}
  .fixedheight { height: 200px;  width: 243px;  position:relative; border:1px solid;}

This is how the template now looks:

  <div class="col-lg-3 col-sm-4 col-6 fixedheight ">

  <div>
    <div >
      <span class="bottomleft"><%= link_to 'edit', edit_product_path(product), class: "btn btn-danger"  %></span>

      <span class="bottomright"><%= button_to "Delete", product, data: {confirm: 'Are u sure?'}, method: :delete, class: "btn btn-danger" %></span>

      <span class="bottomaligned"> <%= button_to "Add to cart", order_items_path(product_id: product) %></span>

     </div>
    <hr>
  </div><!-- /.col-lg-3 -->

The new screenshot:

Bootstrap - align button to the bottom of card

You can use the following Bootstrap 4 modifier classes:

1. Add d-flex to .card-body
2. Add flex-column to .card-body
3. Add mt-auto to .btn nested in .card-body

fiddle

Refer to this page for a full list of flexbox modifying classes for Bootstrap 4.

Bootstrap 3 - Align buttons to bottom

I think the easiest way to do that is to add this CSS:

.panel-group {min-height: 258px;}

I've updated the fiddle: http://jsfiddle.net/Mk692/5/

Bootstrap 3 bottom vertically align image and link with link pull-right

Added a class to the div row that contains the context that should be aligned to the bottom:

.row {
      position: relative;
  }

 .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }

html:

<div class="row .... bottom-align-text" ..>

http://www.bootply.com/EbPZrjAw5w

Read also this: https://stackoverflow.com/a/24539629/1165509

Bootstrap 3 Align Text To Bottom of Div

I think your best bet would be to use a combination of absolute and relative positioning.

Here's a fiddle: http://jsfiddle.net/PKVza/2/

given your html:

<div class="row">
    <div class="col-sm-6">
        <img src="~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

use the following CSS:

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

EDIT - Fixed CSS and JSFiddle for mobile responsiveness and changed the ID to a class.

Bootstrap 4 row with left & right aligned buttons on the bottom of div

Use the flexbox classes that are built in to Bootstrap. You just need CSS to make sure the body is display:flex and full height...

https://www.codeply.com/go/lEaF85K1KU

CSS

body {
   height:100vh;
   display: flex;
   flex-direction: column;
}

.flex-fill {
   flex: 1 1 auto;
}

HTML

<main class="container-fluid d-flex flex-column flex-fill">
    <div class="row flex-column flex-fill">
        <div class="col-12 flex-fill">
            A div here
        </div>
        <div class="col-12">
            <button type="button" class="btn btn-outline-dark btn-sm">Edit</button>
            <button type="button" class="btn btn-outline-dark btn-sm">Delete</button>
            <i class="fa fa-arrows-alt fa-2x float-right"></i>
        </div>
    </div>
</main>
<footer class="container-fluid bg-light py-3">
   Sticky Footer
</footer>

Note: The flex-fill utility class will be included in the next Bootstrap 4.1 release. So after that release the extra CSS for flex-fill won't be needed.

In bootstrap 3, why isn't button aligning to the bottom of the column as the CSS states?

Basically need to add the missing label for the spacing. I've added also .form-control to the .btn as to allow for better display in mobile. Also consider hiding the dummy label on mobile using .hidden-sm or similar.

.m-t {
  margin-top: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-lg-12">
  <div class="panel blank-panel">
    <div class="panel-body">
      <form>
        <div class="form-group">
          <div class="col-sm-3 m-t">
            <label for="fname">First Name</label>
            <input type="text" id="fname" class="form-control">
          </div>
          <div class="col-sm-3 m-t">
            <label for="lname">Last Name</label>
            <input type="text" id="lname" class="form-control">
          </div>
          <div class="col-sm-2 m-t">
            <label for="gender">Gender</label>
            <select class="form-control">
              <option value="" selected>Please Select</option>
              <option value="1">Female</option>
              <option value="2">Male</option>
              <option value="3">Unspecified</option>
            </select>
          </div>
          <div class="col-sm-2 m-t">
            <label for="birthDate" class="control-label">Birth</label>
            <div class="input-group date" id="birthDateDiv">
              <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
              <input type="text" placeholder="mm/dd/yyyy" class="form-control" id="birthDate" name="birthDate" value="">
            </div>
          </div>
          <div class="col-sm-2 m-t" style="">
             <label for="dummy" class="control-label"> </label>
            <button class="btn btn-primary form-control" type="submit" id="addPerson">Add Person</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

Bottom align a button Bootstrap

 .col-lg-4, .col-lg-8     
 { 

float:none;
display:inline-block;
vertical-align:middle;
margin-right:-4px;
 }

OR use this

       .vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
          }

Bootstrap bottom align button inside .form-group

This may work. In .form-inline, form-group classes are aligned to the middle, just simply align it to the bottom.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><style>label{  display:block;}.form-inline .form-group {  vertical-align:bottom;}</style><div class="form-inline">  <div class="form-group">    <label>Field 1</label>    <input id="f1">  </div>
  <div class="form-group">    <label>Field 2</label>    <input id="f2">  </div>
  <div class="form-group">    <label>Field 3</label>    <input id="f3">  </div>
  <div class="form-group align-bottom">    <input type="reset" value="Reset" class="align-bottom">  </div></div>

---

Related Topics