CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Anthony Russo
Anthony Russo

Reputation: 931

Split two vertically aligned columns left and right with Bootstrap

I want to align the left column to the left and the right column to the right while keeping them vertically aligned. I've seen several questions about this and I can get this to work if I don't include the "col-sm-6" since those items are floated it's giving me issues, I am looking for a work around but sticking to the Bootstrap layout.

<header>
    <div class="container">
        <div style="display:table-row;" class="row">
            <div style="display:table-cell; vertical-align:middle; text-align:left;" class="col-sm-6">
                Left Column Text
            </div>
            <div style="display:table-cell; vertical-align:middle; text-align:right;" class="col-sm-6">
                <div class="list">
                    <ul>
                        <li>List Item 1</li>
                        <li>List Item 2</li>
                        <li>List Item 3</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</header>

The questions is answered and the below methods do work but here is also another ready made solution: http://www.minimit.com/demos/bootstrap-3-responsive-columns-of-same-height

Upvotes: 2

Views: 5441

Answers (1)

Shehary
Shehary

Reputation: 9992

Here you go, you can achieve it with flex and align-items:center and keeping the bootstrap framework.

HTML

<div class="container">
    <div class="row sm-flex-center">
        <div class="col-sm-6">
            Left Column Text
        </div>
        <div class="col-sm-6 pull-right">
            <div class="list">
                <ul>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.flex-center {
    display:flex;
    align-items:center;
}
@media ( min-width:768px ) {
    .sm-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 992px ) {
    .md-flex-center {
        display:flex;
        align-items:center;
    }
}
@media ( min-width: 1200px ) {
    .lg-flex-center {
        display:flex;
        align-items:center;
    }
}

Fiddle With Flex

If Not big fan of flex like me, use table

HTML

<div class="container">
    <div class="row table-center">
        <div class="col-md-6 col-sm-6 middle">
            Left Column Text
        </div>
        <div class="col-md-6 col-sm-6 middle pull-right">
            <div class="list">
                <ul>
                    <li>List Item 1</li>
                    <li>List Item 2</li>
                    <li>List Item 3</li>
                </ul>
            </div>
        </div>
    </div>
</div>

CSS

.table-center {
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
}
.middle {
      display: table-cell;
      vertical-align: middle;
      float:none;
}

Fiddle With Table

Upvotes: 2

Related Questions