Bootstrap 3.0 - Grid System

by Teuta Koraqi

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="cont_divider" class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
                <div class="row text_center">
                        <div class="col-md-12">
                            <div id="inner_cont_1">
                                 <a href="#" class="image_link_styling">
                                    <p class="stair_image_font_style">Straight<br/>Staircase</p>

                                    <img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/straight.jpg" alt="straight staircase">
                                    
                                     </a>
                                </div>
                        </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
                <div class="row text_center">
                        <div class="col-md-12">
                            <div id="inner_cont_2">
                                  <a href="#" class="image_link_styling">
                                    <p class="stair_image_font_style">Single Winder<br/>Staircase</p>

                                    <img class="img-responsive staircase_imgs" src="<?php bloginfo('template_directory'); ?>/images/single_winder.jpg" alt="straight staircase">
                                     </a>
                                </div>
                        </div>
                </div>
            </div>

            <div class="col-xs-12 col-sm-6 col-md-3 col_divide">
                <div class="row text_center">
                        <div class="col-md-12">
                ...

CSS

#inner_cont_1{
    background-color: #336699;
}

#inner_cont_2{
    background-color: #cc6633;
}

#inner_cont_3{
    background-color: #ff6633;
}

#inner_cont_4{
    background-color: #ffcc66;
}

.staircase_imgs{
    box-sizing: border-box;
    width: 100%;
    display: block;
    padding: 0 1.238em 0.3em 1.238em;
}

.stair_image_font_style{
    font-size: 2em;
    color: #ffffff;
    line-height: 1em;
    padding: 0.8em 0.938em;
    margin: 0;
}

.col_divide{
    margin-top: 1em;
    margin-bottom: 1em;
}