Search code examples
csstwitter-bootstrap-3grid-layout

Bootstrap grid layout issue - does not work as intended

All my items in the grid layout are set to the same height, but I still have this problem:

enter image description here 

<!-- featured-box -->
<div class="featured-box">

    <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="video-box featured-event-box">

            <div class="row">
                <div class="col-md-4">
                    <div class="featured-event-image-box">
                        <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>
                    </div>
                </div>

                <div class="col-md-8">
                    <p>20th Jan 2016</p>
                    <h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4>
                    <p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="video-box">
            <!-- 16:9 aspect ratio -->
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/qYv5R_e5hTM" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="video-box featured-event-box">

            <div class="row">
                <div class="col-md-4">
                    <div class="featured-event-image-box">
                        <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>
                    </div>
                </div>

                <div class="col-md-8">
                    <p>20th Jan 2016</p>
                    <h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4>
                    <p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="video-box">
            <!-- 16:9 aspect ratio -->
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/feQ99SuGdsw" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>

    <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="video-box featured-event-box">

            <div class="row">
                <div class="col-md-4">
                    <div class="featured-event-image-box">
                        <a href="#"><img src="images/featured-event-01.jpg" class="img-responsive transparent-onhover" /></a>
                    </div>
                </div>

                <div class="col-md-8">
                    <p>20th Jan 2016</p>
                    <h4 class="featured-event-heading truncate"><a href="#" title="Lorem ipsum dolor sit amet">Lorem ipsum dolor sit amet</a></h4>
                    <p class="truncate-multiple" title="Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.">Nemore praesent an eam. Duo an partem possim. Sit posse euismod ad, pro no lorem melius dissentiet. Ius novum detracto in, vim volumus reprehendunt ei, cum ut oporteat delicatissimi.</p>
                </div>
            </div>

        </div>
    </div>

    <div class="col-md-4 col-sm-4 col-xs-6">
        <div class="video-box">
            <!-- 16:9 aspect ratio -->
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/r_KEWddTrVc" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
    </div>

</div>
<!-- featured-box -->

CSS:

.featured-heading-box {
    padding: 0 15px;
}

.featured-heading {
    font-size: 20px;
    padding: 0 0 15px 0;
    border-bottom: 1px solid #b2b2b2;
}

.video-box {
    padding: 15px 0 15px 0;
    /*border: 1px solid red;*/
}

/**
 * https://css-tricks.com/snippets/css/css-box-shadow/#article-header-id-1
 */
.featured-event-box {
    padding: 15px;
    margin: 15px 0 15px 0;
    min-height: 196px;
    overflow: hidden;
    border: 1px solid #e6e6e6;
    background-color: #f9f9f9;
    -moz-box-shadow:    inset 0 0 10px #e6e6e6;
   -webkit-box-shadow: inset 0 0 10px #e6e6e6;
    box-shadow:         inset 0 0 10px #e6e6e6;
}

.featured-event-image-box {
   margin-bottom: 15px;
}

.featured-event-heading a {
    font-size: 14px;
    color: inherit;
}

.featured-event-heading a:hover {
    text-decoration: none;
    color: #888;
}

Any idea why and how I can fix this?

Solution

  • If you are going to use columns in a grid, you need to have the columns inside of a row:

    <div class="row">
    <div class="col-md-4"> 
           stuff
    </div>
    <div class="col-md-4"> 
          more stuff
    </div>
</div>