Input-group div in bootstrap, position it to bottom

Question

On a Bootstrap webshop page, im listing the products to col-md-3 div . These div s now have the same height width jquery.

How can i position the input-group , div always to bottom in these col-md-3 divs?

I upload an image, on that, you can see, whats my problem. If the product name is to long or short, or only one price is displayed, the product number input and the add to cart button comes up, and i want them to be at the bottom always.

<div class="col-md-3 main_item_div"> 
<a href="#" title="ASUS B85M-G 90MB0G50 alaplap" class="main_item_img_to_link"> 
    <img src="test.jpg" alt="ASUS B85M-G 90MB0G50 alaplap" class="img-responsive"> 
</a>
<h2 class="main_item_title">
    <a href="#" title="ASUS B85M-G 90MB0G50 alaplap" class="main_item_title_to_link">Product name</a>
</h2>
<span class="main_item_cikkszam">Cikkszám: B85M-G 90MB0G50</span> 
<span class="main_item_kiszereles">Kiszerelés: Darab</span> 
<span class="main_item_kiszereles"><b>Készleten</b></span>
<input type="hidden" value="1" id="MinimumOrder2">
<span class="main_item_price_2">19.090 Ft,-</span><span class="main_item_price_3">Akciós ár: 18.290 Ft,-</span>

<div class="input-group">
    <input type="text" id="item_darabszam2" class="form-control item_darabszam" value="1">
    <span class="input-group-btn">
        <button onClick="add_to_cart(2);" class="btn btn-secondary item_add_to_cart" type="button">
            <i class="fa fa-shopping-cart" aria-hidden="true"></i> Kosárba
        </button>
    </span>
</div>

Click here for image

Answer 1

The solution would be giving relative position to parent element(here "main-item-div") and then giving bottom:0px and absolute position to child element (here "input-group").

This would keep the input-group element stick to bottom regardless of the content of the parent element.

.main_item_div {
position: relative;
}

.input-group {
position: absolute;
bottom: 0;
}

You can see the example in this fiddle

Hope this helps. Thank you.

Answer 2

You can try this CSS for this class 'main_item_div'.

.main_item_div {
  position:absolute;
  bottom:0;
  left:0;
}

Answer 3

you can do this by css text-overflow: ellipsis;
you can use:
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_text-overflow
OR
http://masonry.desandro.com/

Answer 4

there are 4 products with different height

1- you can the jquery code for make equal height

2- And with this css code you can put the input-group in the bottom of each product

this is will work for you

and this is the demo bellow

 $(document).ready(function(){ var highestItem = 0; $('.item-inner', this).each(function(){ if($(this).height() > highestItem) { highestItem = $(this).height(); } }); $('.item-inner',this).height(highestItem); }); 

 .box-container{ width: 100%,; padding: 20px; } .item{ padding: 10px; } .item-inner{ background-color: #f2f2f2; padding: 10px; box-shadow: 0 0 2px rgba(0,0,0,0.5); } .media a img{ width: 100%; } .content{ margin-bottom: 80px; } .btn-action{ display: block; position: absolute; bottom: 20px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="box-container"> <div class="row"> <div class="item col-md-3 col-xs-6"> <div class="item-inner"> <div class="content"> <div class="media"> <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-1" alt="product-1"></a> </div> <h2></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus veritatis reprehenderit magni, alias ullam itaque fugit corporis autem, consequatur, nobis officiis.</p> </div> <div class="btn-action"> <div class="input-group"> <input type="text" class="form-control" value="1"> <span class="input-group-btn"> <button class="btn btn-primary" type="button"> <i class="fa fa-shopping-cart"></i> Action </button> </span> </div> </div> </div> </div> <div class="item col-md-3 col-xs-6"> <div class="item-inner"> <div class="content"> <div class="media"> <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-2" alt="product-2"></a> </div> <h2></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="btn-action"> <div class="input-group"> <input type="text" class="form-control" value="1"> <span class="input-group-btn"> <button class="btn btn-primary" type="button"> <i class="fa fa-shopping-cart"></i> Action </button> </span> </div> </div> </div> </div> <div class="item col-md-3 col-xs-6"> <div class="item-inner"> <div class="content"> <div class="media"> <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-3" alt="product-3"></a> </div> <h2></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus.</p> </div> <div class="btn-action"> <div class="input-group"> <input type="text" class="form-control" value="1"> <span class="input-group-btn"> <button class="btn btn-primary" type="button"> <i class="fa fa-shopping-cart"></i> Action </button> </span> </div> </div> </div> </div> <div class="item col-md-3 col-xs-6"> <div class="item-inner"> <div class="content"> <div class="media"> <a href="#"><img src="https://placehold.it/200x100/ff6600/ffffff/?text=product-4" alt="product-4"></a> </div> <h2></h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur quo animi error natus molestias dolorum sunt velit delectus veritatis reprehenderit magni, alias ullam itaque fugit corporis autem..</p> </div> <div class="btn-action"> <div class="input-group"> <input type="text" class="form-control" value="1"> <span class="input-group-btn"> <button class="btn btn-primary" type="button"> <i class="fa fa-shopping-cart"></i> Action </button> </span> </div> </div> </div> </div> </div> </div>