Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap 3 thumbnail vertical-align

I’m creating my first website, using Twitter Bootstrap 3.
I want to create a feedback section using thumbnails.
What I need is to vertical-align social buttons in the bottom of each thumbnail no matter of thumbnail’s height.

Here is my HTML code:

<div class="row">
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail vertical-container">
                    <img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
                    <div class="caption">
                        <h3>Lorem Ipsum!</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ut earum libero quaerat modi facilis suscipit qui at, minus tempore, fugiat ipsam, consequatur veniam iste itaque tempora dignissimos consectetur quas.</p>
                        <div class="vertical-container1">
                            <p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
                    <div class="caption">
                        <h3>Lorem Ipsum!</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
                        <p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="thumbnail">
                    <img src="http://psiholog.ba/wp-content/uploads/2012/02/pozitiva.gif" alt="...">
                    <div class="caption">
                        <h3>Lorem Ipsum!</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos. Ipsam magnam officiis atque eveniet, autem tempora! Minima repellendus, eius voluptatem a vitae beatae eligendi. Adipisci!</p>
                        <p><a href="#" class="btn btn-primary" role="button">VK</a> <a href="#" class="btn btn-default" role="button">Instagram</a></p>
                    </div>
                </div>
            </div>
        </div>!

How it looks now:

Tags:

3

Answers


  1. 0

    You can do this by positioning divs. Assign position relative to the container div. in your case col-md-4 but as it’s a bootstrap class you have to give it other class name and assign position relative to it.

    And position of the div containing buttons. (in your case vertical-container1) to position absolute

    parentWrapperDiv{position:relative;}
buttonsContainer{position:absolute;bottom:0;}
    Login or Signup to reply.
  2. 0

    you try code before:

    .thumbnail {position:relative;}
.thumbnail a.btn {position:absolute;bottom:0;left:0;}
    Login or Signup to reply.
  3. 0

    You could set a minimum height for your text area using a custom class;

    <p class="min-height">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos...</p>

.min-height {
min-height:100px;
}

    this will ensure all the text area’s are the same height even if there is not enough text to push the buttons down.

    An Exmaple

    of course this could go the other way and end up having too much text in which case you’ll want to add a maximum height thus;

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel nostrum harum ipsam labore quos…

    .max-height {
max-height:120px;
overflow:hidden; // this will cut the text off
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search