CODEWITHSUNDEEP
twitter-bootstrapsassflexbox
Christophvh
Christophvh

Reputation: 13254

Vertically align Bootstrap panel with flexbox

I want to vertically align a Bootstrap panel using flexbox, but i can't figure it out.

html

<div class="container">
    <div class="row vertical-align">
        <div class="col-md-8">
            <div class="panel panel-default">
                <div class="panel-heading">Title</div>
                <div class="panel-body">
                    <p>Bla bla</p>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

html, body {
    height:100%;
}

.vertical-align {
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
   -webkit-box-pack: center;
   justify-content: center;
}

The horizontal align works, only the vertical align doesn't do anything. The panel sticks to the top of the screen

Upvotes: 0

Views: 691

Answers (2)

Med
Med

Reputation: 2802

Unknown height:

.vertical-align {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

Flexbox:

.vertical-align {
  height: 300px; //
  display: flex;
  justify-content: center;
  align-items: center;
}

Upvotes: 0

Jack Deadman
Jack Deadman

Reputation: 196

You need to give the container a height and set the height of .vertical-align to be 100%.

html,
body {
  height: 100%;
}

.container {
  height: 100%
}

.vertical-align {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 100%;
  background-color: pink;
}

Here I've just given all containers a height of 100% but you probably want to target that different in your actual code.

http://codepen.io/anon/pen/zKZvOE

Upvotes: 1

Related Questions