CODEWITHSUNDEEP
csstwitter-bootstrap-3
user3786102
user3786102

Reputation: 145

Bootstrap columns are not stacking

In my classes .fam-col-right and .fam-col-left I am using display: table-cell; vertical-align: middle; float: none; in my css to vertically center the content I have as seen below. The .row is set to display: table;.

enter image description here

The problem I'm having is my columns aren't stacking at all and I'm not sure why. Here is what it looks like instead of it stacking.

enter image description here

How can I have my content stack and stay vertically aligned to the middle?

Here is my code:

<!-- Families -->
<div id="families">
<div class="container-fluid">
    <div class="row text-center center-row">

        <div class="col-md-6 col-md-push-6 fam-col-left">
            <h2>Families & Individuals</h2>
            <br>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus earum dolorum sapiente quod, voluptas optio, ducimus nemo rerum commodi porro laudantium nam. Veritatis ex enim culpa voluptatem, corporis? Distinctio, obcaecati.</p>
        </div>

        <div class="col-md-6 col-md-pull-6 fam-col-right">
            <ul class="list-unstyled">
             <li><i class="fa fa-map-o fa-fw fa-1x"></i><a href="#"> Wealth Management</a></li>
             <li><i class="fa fa-pie-chart fa-fw fa-1x"></i><a href="#"> Asset Allocation</a></li>
             <li><i class="fa fa-anchor  fa-fw fa-1x"></i><a href="#"> Insurance Risk Assessments</a></li>
             <li><i class="fa fa-graduation-cap fa-fw fa-1x"></i><a href="#"> Education Funds Planning</a></li>
             <li><i class="fa fa-calendar-check-o fa-fw fa-1x"></i><a href="#"> Retirement Planning</a></li>
             <li><i class="fa fa-area-chart fa-fw fa-1x"></i><a href="#"> Investments</a></li>
            </ul>
        </div>

    </div> <!-- end row -->
</div> <!-- end container-fluid -->
</div> <!-- end families -->

.center-row {
display: table;
}

#families {
margin-bottom: -30px;
}

.fam-col-left {
background: url('../img/space.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

height: 550px;
color: #FCFFF5; /*white*/

display: table-cell;
vertical-align: middle;
float: none;
}

.fam-col-left p {
width: 50%;
margin: 0 auto;
}

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

.fam-col-right li {
padding-bottom: 20px;
}

Upvotes: 1

Views: 138

Answers (1)

Saeed Salam
Saeed Salam

Reputation: 467

looking for something like this? - https://jsfiddle.net/9s1e9tm0/

.center-row {
display: table;
}

#families {
margin-bottom: -30px;
}

.fam-col-left {
background: url('http://www.unoosa.org/res/timeline/index_html/space-2.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

height: 550px;
color: #FCFFF5; /*white*/

display: table-cell;
vertical-align: middle;
float: none;
width:50%;
}

.fam-col-left p {
width: 50%;
margin: 0 auto;
}

.fam-col-right {
display: table-cell;
vertical-align: middle;
float: none;
width:50%;
}

.fam-col-right li {
padding-bottom: 20px;
}

Upvotes: 1

Related Questions