CODEWITHSUNDEEP
twitter-bootstrapalignment
Barbio
Barbio

Reputation: 51

Align a div to bottom using Twitter's Bootstrap 2.x

I'm trying to align a DIV into to the bottom of the container but it's not working.

Using position relative and bottom 0 , jumps out of the container.

My Code: http://jsfiddle.net/qXT6K/118/

<div class="row-fluid" style="border: 1px red dashed;">
    <div class="span4 well text-center">
        <p>BOX1</p>
    </div>
    <div class="span4 text-right well" style="position:absolute;bottom:0;">
        <form action="demo_form.asp" style="margin:0px;">
            <input style="padding: 0;margin-top: 10px;" class="input-mini" type="text" name="user" placeholder="USER">
            <input style="padding: 0;margin-top: 10px;" class="input-mini" type="password" name="PASS" placeholder="PASS">
            <button style="margin-right: 3px;" type="submit" class="btn btn-small btn-primary disabled" disabled="disabled"> <i class="icon-user icon-white"></i>

            </button>
        </form>
    </div>
</div>

Upvotes: 0

Views: 6179

Answers (2)

Ravimallya
Ravimallya

Reputation: 6610

If you want to bottom align the first span to the row, then one hack is there. Just check this fiddle.

Set position:relative; style to the outer row-fluid class. and set position:absolute; to the first span. To set the second span in it's position, you have to add offset4 as below given format:

<div class="row-fluid" style="border: 1px red dashed;position:relative;">
    <div class="span4 well text-center" style="position:absolute; bottom:0;">
        <p>BOX1</p>
    </div>
    <div class="span4 text-right well offset4" style="">
        <form action="demo_form.asp" style="margin:0px;">
                    <input style="padding: 0;margin-top: 10px;" class="input-mini" type="text" name="user" placeholder="USER">
                    <input style="padding: 0;margin-top: 10px;" class="input-mini" type="password" name="PASS" placeholder="PASS">
                    <button style="margin-right: 3px;" type="submit" class="btn btn-small btn-primary disabled" disabled="disabled">
                        <i class="icon-user icon-white"></i>
                    </button>
                </form>
    </div>
</div>

Upvotes: 1

Bass Jobsen
Bass Jobsen

Reputation: 49054

You use the class .well which add a margin-bottom of 20px;

add in your css:

  .well {margin-bottom:0;}

see: http://jsfiddle.net/bassjobsen/vZM85/

Upvotes: 0

Related Questions