Vertical-Align With Bootstrap 3

.section-content {  padding-top: 10%;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/><section id="header">    <div class="container-fluid">        <div class="row">            <div class="section-content">                <h1 class="text-center pagination-centered">Heading</h1>                 <h3 class="text-center pagination-centered">Sub heading</h3>             </div>          </div>     </div> </section>

vertical align middle content with bootstrap 3

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.

How to vertically align div inside Bootstrap 3 column

This is one way to do it, and is more crossbrowser supported than flexbox.

http://jsfiddle.net/p9ou30g7/3/

.logoCont {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    height: 50%;
    width: 50%;
    background: red;
}

There are other ways that you can check out here:
https://css-tricks.com/centering-css-complete-guide/

Vertically center Bootstrap 3 button within column

Well You can use this code:

.sellthem {
    display: flex;
    align-items: center;
}

@media only screen and (max-width : 768px) {
    .sellthem {
        display: block;
    }
}

Take in account that this is more like a hack (you're overwriting its code base) so it isn't the best way to solve this issue since Bootstrap has not support for vertical align in its grid system (not sure but I think that in the new version they will have vertical alignment).

Note: please check this solution in all browser you are supporting.

Two possible solution could be use another grid system based in flexbox or just write the styles for this case scenario for your own.

UPDATE

You can write just the following and it should work the same:

@media only screen and (min-width : 768px) {
    .sellthem {
        display: flex;
        align-items: center;
    }
}

How to vertically align an icon next to text in Bootstrap 3

You are better off using your own css for vertical alignment instead of anything from bootstrap.

You can use the following combination to vertically centre an element within its parent:

.vertically-centered {
    position: relative;
    top:50%;
    transform: translateY(-50%);
}

This is because the percentage given to translateX is relative to the size of the element.

Bootstrap columns do not by default fill the row height. In your About section that means that the divs on the left with class="col-sm-3 outline" will not be the same height as the column to the right.

This article explains how to do that.

Vertical align entire row in Bootstrap 3

The following CSS seems to be giving the desired result:

.row {
    display: flex;
    align-items: center;
    min-height: 100vh;
}

Check out the fiddle that I made for this problem: https://jsfiddle.net/2678jhbh/2/

---

Related Topics