Twitter Bootstrap Grid Vertical Align Bottom

Twitter Bootstrap grid Vertical align bottom

Here's an updated version of your fiddle with (what I think) you want: http://jsfiddle.net/qXT6K/34/

You were on the right track with position: absolute; bottom: 0;; it's just a matter of getting the offsets right.

I have given the container div a height just to show the bottom-alignment. You do need to give it a height, otherwise with all its children absolutely positioned, it will default to 0.

To center the container div (and so have all its children appear centered), you need to use margin-left: auto and margin-right: auto (shorthand margin: 0 auto), plus a set width on the div (applied through the class span8 in my example), plus removal of the float property which is bundled into all span-classed elements. You also need padding-right: 40px to center the container's children, accounting for the margin-left: 20px which is also applied to .span-s.

Twitter Bootstrap grid Vertical align bottom

Here's an updated version of your fiddle with (what I think) you want: http://jsfiddle.net/qXT6K/34/

You were on the right track with position: absolute; bottom: 0;; it's just a matter of getting the offsets right.

I have given the container div a height just to show the bottom-alignment. You do need to give it a height, otherwise with all its children absolutely positioned, it will default to 0.

To center the container div (and so have all its children appear centered), you need to use margin-left: auto and margin-right: auto (shorthand margin: 0 auto), plus a set width on the div (applied through the class span8 in my example), plus removal of the float property which is bundled into all span-classed elements. You also need padding-right: 40px to center the container's children, accounting for the margin-left: 20px which is also applied to .span-s.

How do I bottom-align grid elements in bootstrap fluid layout

Please note: for Bootstrap 4+ users, please consider Christophe's solution (Bootstrap 4 introduced flexbox, which provides for a more elegant CSS-only solution). The following will work for earlier versions of Bootstrap...

See http://jsfiddle.net/jhfrench/bAHfj/ for a working solution.

//for each element that is classed as 'pull-down', set its margin-top to the difference between its own height and the height of its parent
$('.pull-down').each(function() {
  var $this = $(this);
  $this.css('margin-top', $this.parent().height() - $this.height())
});

On the plus side:

  • in the spirit of Bootstrap's existing helper classes, I named the class pull-down.
  • only the element that is getting "pulled down" needs to be classed, so...
  • ...it's reusable for different element types (div, span, section, p, etc)
  • it's fairly-well supported (all the major browsers support margin-top)

Now the bad news:

  • it requires jQuery
  • it's not, as-written, responsive (sorry)

How to align content bottom on Bootstrap 4 col

You can use align-items-end from the new Bootstrap 4 flexbox utilities...

<div class="container">
    <hr>
    <div class="row align-items-end">
        <div class="col-md-6">
            © BusinessName 2017.
        </div>
        <div class="col-md-3">
            <a href="/blog"> Blog </a>
            <br>
            <a href="/blog"> FAQ </a>
            <br>
            <a href="/blog"> About </a>
        </div>
        <div class="col-md-3">
            <strong>Contact</strong>
            <br> contact@businessname.com
            <br> more info bla bla
            <br> more more more info
        </div>
    </div>
</div>

http://codeply.com/go/GXTF43toS9

Also, auto margins work inside flexbox. There you could use mt-auto (margin-top:auto) to "push" the col-* to the bottom.

Vertical Align Center in Bootstrap 4

Important! Vertical center is relative to the height of the parent

If the parent of the element you're trying to center has no defined
height, none of the vertical centering solutions will work!

Now, onto vertical centering...

Bootstrap 5 (Updated 2021)

Bootstrap 5 is still flexbox based so vertical centering works the same way as Bootstrap 4. For example, align-items-center, justify-content-center or auto margins can used on the flexbox parent (row or d-flex).

  • use align-items-center on a flexbox row parent (row or d-flex)
  • use justify-content-center on a flexbox column parent (d-flex flex-column)
  • use my-auto on a flexbox parent

Vertical Center in Bootstrap 5

Bootstrap 4

You can use the new flexbox & size utilities to make the container full-height and display: flex. These options don't require extra CSS (except that the height of the container (ie:html,body) must be 100%).

Option 1 align-self-center on flexbox child

<div class="container d-flex h-100">
    <div class="row justify-content-center align-self-center">
     I'm vertically centered
    </div>
</div>

https://codeply.com/go/fFqaDe5Oey

Option 2 align-items-center on flexbox parent (.row is display:flex; flex-direction:row)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron">
                I'm vertically centered
            </div>
        </div>
    </div>
</div>

Sample Image

https://codeply.com/go/BumdFnmLuk

Option 3 justify-content-center on flexbox parent (.card is display:flex;flex-direction:column)

<div class="container h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="card h-100 border-primary justify-content-center">
                <div>
                    ...card content...
                </div>
            </div>
        </div>
    </div>
</div>

https://codeply.com/go/3gySSEe7nd

More on Bootstrap 4 Vertical Centering

Now that Bootstrap 4 offers flexbox and other utilities, there are many approaches to vertical
alignment. http://www.codeply.com/go/WG15ZWC4lf

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

2 - Vertical Center with Flexbox:

vertical center grid columns

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

See this Q/A to center, but maintain equal height

3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo

More examples
Vertical center image in <div>
Vertical center .row in .container

Vertical center and bottom in <div>
Vertical center child inside parent

Vertical center full screen jumbotron

Important! Did I mention height?

Remember vertical centering is relative to the height of the parent element. If you want to center on the entire page, in most cases, this should be your CSS...

body,html {
  height: 100%;
}

Or use min-height: 100vh (min-vh-100 in Bootstrap 4.1+) on the parent/container. If you want to center a child element inside the parent. The parent must have a defined height.

Also see:

Vertical alignment in bootstrap 4

Bootstrap Center Vertical and Horizontal Alignment

How to align element to bottom in a Bootstrap column?

.bottomdiv {    border: 1px solid red;    height: 50px;    width: 50px;    position:absolute;    left:0;    bottom:0;}.col-md-6.col-sm-6.col-xs-6 {    display: table-cell;    height: auto;    border: 1px solid black;    float: none;}
<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.7/js/bootstrap.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><div class="container">    <div class="row">       <div class="parent">        <div class="col-md-6 col-sm-6 col-xs-6">             <div class="bottomdiv">             </div>                     </div>        <div class="col-md-6 col-sm-6 col-xs-6">            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>        </div>    </div></div></div>

vertical-align with Bootstrap 3

This answer presents a hack, but I would highly recommend you to use flexbox (as stated in @Haschem answer), since it's now supported everywhere.

Demos link:

- Bootstrap 3

- Bootstrap 4 alpha 6

You still can use a custom class when you need it:

.vcenter {    display: inline-block;    vertical-align: middle;    float: none;}
<div class="row">    <div class="col-xs-5 col-md-3 col-lg-1 vcenter">        <div style="height:10em;border:1px solid #000">Big</div>    </div><!--    --><div class="col-xs-5 col-md-7 col-lg-9 vcenter">        <div style="height:3em;border:1px solid #F00">Small</div>    </div></div>

BootstrapVue best way to vertically align content?

The following should do the trick for you:

<b-container>
  <b-row class="vh-100 text-center" align-v="center">
    <b-col><b-button class="main-navigation-button" variant="primary">Create</b-button></b-col>
    <b-col><b-button class="main-navigation-button" variant="primary">Search</b-button></b-col>
    <b-col><b-button class="main-navigation-button" variant="primary">Edit</b-button></b-col>
  </b-row>
</b-container>

The class vh-100 sets the row height to 100% of the viewport height, and we set the prop align-v to center (centers the columns vertically in the middle of the row). Class text-center aligns the button in the center of the columns.

Vertical alignment in Bootstrap 4

You can use the flex-xs-middle class like this..

Bootstrap 4 Alpha 5

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
        <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-6">
            <div class="circle-medium backgrounds"></div>
        </div>
         <div class="col-xs-6 flex-xs-middle">
            <div class="name">Supplier</div>
        </div>
    </div>
</div>

http://www.codeply.com/go/PNNaNCB4T5 (Using the Bootstrap 4 flexbox enabled CSS)

Bootstrap 4

UPDATE for Bootstrap 4.0.0

Now that Bootstrap 4 is flexbox by default there are many different approaches to vertical alignment using: auto-margins, flexbox utils, or the display utils along with vertical align utils. At first "vertical align utils" seems obvious but these only work with inline and table display elements. Below are the Bootstrap 4 vertical centering options. Remember, vertical alignment is relative to parent height.

1 - Vertical Center Using Auto Margins:

Another way to vertically center is to use my-auto. This will center the element within it's container. For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.

<div class="row h-100">
    <div class="col-sm-12 my-auto">
        <div class="card card-block w-25">Card</div>
    </div>
</div>

Vertical Center Using Auto Margins Demo

my-auto represents margins on the vertical y-axis and is equivalent to:

margin-top: auto;
margin-bottom: auto;

2 - Vertical Center with Flexbox:

vertical center grid columns

Since Bootstrap 4 .row is now display:flex you can simply use align-self-center on any column to vertically center it...

       <div class="row">
           <div class="col-6 align-self-center">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

or, use align-items-center on the entire .row to vertically center align all col-* in the row...

       <div class="row align-items-center">
           <div class="col-6">
                <div class="card card-block">
                 Center
                </div>
           </div>
           <div class="col-6">
                <div class="card card-inverse card-danger">
                    Taller
                </div>
          </div>
    </div>

Vertical Center Different Height Columns Demo

Important: The direct parent of the element to be aligned must have a defined height!

3 - Vertical Center Using Display Utils:

Bootstrap 4 has display utils that can be used for display:table, display:table-cell, display:inline, etc.. These can be used with the vertical alignment utils to align inline, inline-block or table cell elements.

<div class="row h-50">
    <div class="col-sm-12 h-100 d-table">
        <div class="card card-block d-table-cell align-middle">
            I am centered vertically
        </div>
    </div>
</div>

Vertical Center Using Display Utils Demo


Related Topics

Adding Class to React Component After a Certain Amount of Time

Flex-Box: Shrink Before Wrap

How to Loop a CSS Animation with Multiple Keyframe Definitions

What Is The Definition of "The Baseline of Parent Box"

Vertical Align Glyphicon in Bootstrap 3

Actionview::Template::Error (Variable @Fontawesomeeotpath_Iefix Is Undefined)

Translate3D Between 0% and Negative % in Ie10

How to Get Twitter Bootstraps Mobile Navbar to Overlay The Content on The Page Instead of Pushing It Down

HTML5 Video with Fixed Height, But Scale Width to 100%

Excluding Bootstrap from Specific Routes in Meteor

How to Center an Image Within a Col Element in Bootstrap 3+

Why Is This Div's Calculated Height More Than Its Content

Why We Are Using Sass, Even We Are Using SCSS

Mobile Safari Text Input Width Bug

Rem Font Size Not Adjusting Below Arbitrary Threshold

Matrix Scale Transition Not Working

iPhone Viewport Height Too Large in Landscape Mode

Font-Awesome Caret Up and Caret Down Stacked on Top of Each Other


Leave a reply



Submit