CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
HDP
HDP

Reputation: 4221

vertical align middle content with bootstrap 3

I want to set vertical middle content in div block with latest bootstrap v3.2.0.

I have Read the answer to vertical-align with bootstrap 3, but it uses float:none; in div block.

However, I can't use float:none; in div block according to our layout.

I have this code:

<div class="container">
  <div class="col-lg-4">....</div>
  <div class="col-lg-5">....</div>
  <div class="col-lg-3">....</div>
</div>

Content Height is dynamic in block 1. I want to set vertical middle content in block 2 and 3 according to block 1 height.

This is how our layout currently looks:

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |      Content     |      Content     |
|        is        |------------------ ------------------
|     Dynamic      | 
 ------------------

if, I will use float:none; So, This is Our layout looks:

       Block 1           Block 2        
 ------------------ ------------------ 
|  Content Height  |                  |
|        is        |      Content     |
|     Dynamic      |                  |
 ------------------ ------------------ 
       Block 3
 ------------------
|      Content     |
 ------------------

This is how I would like it to look:

       Block 1           Block 2            Block 3
 ------------------ ------------------ ------------------
|  Content Height  |                  |                  |
|        is        |      Content     |      Content     |
|     Dynamic      |                  |                  |
 ------------------ ------------------ ------------------

Upvotes: 3

Views: 9758

Answers (4)

Cubiczx
Cubiczx

Reputation: 1115

.container {
  position: relative;
  height: 14rem;
  border: 1px solid;
}

.jumbotron {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  border: 1px dashed deeppink;
}
<div class="container theme-showcase" role="main">
  <div class="jumbotron">
    I want to center this div with Bootstrap.
  </div>
</div>

Get from [Solved] Vertically center with Bootstrap

Upvotes: 1

Stephan Wagner
Stephan Wagner

Reputation: 990

I found the best way to achieve that is to create a table layout within the container:

Check out this fiddle: http://jsfiddle.net/StephanWagner/Zn79G/9/embedded/result

<div class="container">
  <div class="table-container">
    <div class="col-table-cell col-lg-4">A<br>A<br>A<br>A<br>A<br>A<br>A</div>
    <div class="col-table-cell col-lg-5">B</div>
    <div class="col-table-cell col-lg-3">C</div>
  </div>
</div>

@media (min-width: 1200px) {

     .table-container {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    .table-container .col-table-cell {
        display: table-cell;
        vertical-align: middle;
        float: none;
    }
}

The media query makes sure the content will only be a table in large displays, otherwise it will stack as it used to.

Upvotes: 7

raffi
raffi

Reputation: 139

I think this is the solution with bootstrap 3: http://jsfiddle.net/raffi/52VtD/7348/

.col-lg-4 {
    display: table-cell;
    vertical-align: middle;
    float: none;
}

Upvotes: 0

j08691
j08691

Reputation: 207861

This worked for me:

.container > div {
    float: none;
    display: table-cell;
    vertical-align: middle;
}

bootply example

Upvotes: 3

Related Questions