Twitter Bootstrap: Place Elements Side By Side In Small Resolution?

I'm trying to make my design responsive. I have been successful so far but I am having some issues with the alignment. Like you see in the picture below, The design is towards the

Solution 1:

Set the Width of your thumnail class to 100% instead of 200px. If you want to set width for other resolutions, then consider using min-width

.thumbnail{
    position:relative;
    height:200px;
    width:auto;
}

Reason for Issue 2: Bootstrap is set to Mobile First and since you have only used col-md-3 & col-sm-6, it consider col-xs-12 when the browser width goes below 768px.

<div class="col-md-3 col-sm-6 col-xs-6">
   <divclass="thumbnail"><imgsrc="images/Layer26.png"alt=""class="img-responsive"><divclass="caption"><!-- Start Caption --><divclass="btn-group btn-trigger"><ahref="#"class="btn btn-default web-link">Link</a><ahref="#"class="btn btn-default more-info">More</a></div></div><!-- End Caption --></div><h5class="text-center">Artist Name 2, city</h5></div>

Solution 2:

You should post your relevant code in the question and make a Fiddle or JSBin. For what you're seeking to do, I would not use the thumbnail class since you have to over-ride styles on that. You need a wrapper around the image and the caption so that the hover treatment knows where to position itself. I also added a grid for 480px to 767px. I found it better to use larger images so that when it sizes down, it still fills the width of the wrapper, unless you use 100% on the image (not min-width).

DEMO: http://jsbin.com/xujum/2/

---

HTML (needs the .container > .row pattern):

<divclass="col-sm-6 col-md-3 col-ms-6 text-center hover-me"><divclass="inner"><imgsrc="http://lorempixel.com/g/400/400/"alt=""class="center-block"><divclass="caption"><divclass="btn-group btn-trigger"><ahref="#"class="btn btn-default web-link">Link</a><ahref="#"class="btn btn-default more-info">More</a></div></div><!-- End Caption --></div><h5>Artist Name 2, city</h5></div><!-- /col-* -->

CSS

.hover-me {
    margin-bottom: 20px
}

.hover-me.inner {
    position: relative;
    overflow: hidden;
}

.hover-me.inner:before {
    content: " ";
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in-out;
}

.hover-me:hover.inner:before {
    top: 0;
    background: rgba(18,129,140,.50);
}

.hover-me.caption {
    position: absolute;
    width: 100%;
    top: -100px;
}

.hover-me:hover.caption {
    top: 50%;
    margin-top: -20px;
    transition: all .5s ease-in-out;
}

.hover-meimg {
    max-width: 100%;
    display: block;
}

@media (min-width:1200px) { 
    .container {
        border: 1px solid red
    }

    .hover-meimg {
        max-width: 200px;
        height: auto;
    }

    .hover-me.inner {
        max-width: 200px;
        margin: 0 auto;
    }
}

/*------------------------------------------------------------------------------------------------------------------------------------
  bootstrap columns for 480px - 767px == col-ms-* // there are no responsive utilities for this
-------------------------------------------------------------------------------------------------------------------------------------*/@media (min-width: 480px) and (max-width: 767px) { 
    .col-ms-1,
    .col-ms-2,
    .col-ms-3,
    .col-ms-4,
    .col-ms-5,
    .col-ms-6,
    .col-ms-7,
    .col-ms-8,
    .col-ms-9,
    .col-ms-10,
    .col-ms-11,
    .col-ms-12 {
        float: left;
        position: relative;
        min-height: 1px;
        padding-left: 2%;
        padding-right: 2%;
    }

    .col-ms-12 {
        width: 100%
    }

    .col-ms-11 {
        width: 91.66666666666666%
    }

    .col-ms-10 {
        width: 83.33333333333334%
    }

    .col-ms-9 {
        width: 75%
    }

    .col-ms-8 {
        width: 66.66666666666666%
    }

    .col-ms-7 {
        width: 58.333333333333336%
    }

    .col-ms-6 {
        width: 50%
    }

    .col-ms-5 {
        width: 41.66666666666667%
    }

    .col-ms-4 {
        width: 33.33333333333333%
    }

    .col-ms-3 {
        width: 25%
    }

    .col-ms-2 {
        width: 16.666666666666664%
    }

    .col-ms-1 {
        width: 8.333333333333332%
    }

    .col-ms-pull-12 {
        right: 100%
    }

    .col-ms-pull-11 {
        right: 91.66666666666666%
    }

    .col-ms-pull-10 {
        right: 83.33333333333334%
    }

    .col-ms-pull-9 {
        right: 75%
    }

    .col-ms-pull-8 {
        right: 66.66666666666666%
    }

    .col-ms-pull-7 {
        right: 58.333333333333336%
    }

    .col-ms-pull-6 {
        right: 50%
    }

    .col-ms-pull-5 {
        right: 41.66666666666667%
    }

    .col-ms-pull-4 {
        right: 33.33333333333333%
    }

    .col-ms-pull-3 {
        right: 25%
    }

    .col-ms-pull-2 {
        right: 16.666666666666664%
    }

    .col-ms-pull-1 {
        right: 8.333333333333332%
    }

    .col-ms-pull-0 {
        right: 0%
    }

    .col-ms-push-12 {
        left: 100%
    }

    .col-ms-push-11 {
        left: 91.66666666666666%
    }

    .col-ms-push-10 {
        left: 83.33333333333334%
    }

    .col-ms-push-9 {
        left: 75%
    }

    .col-ms-push-8 {
        left: 66.66666666666666%
    }

    .col-ms-push-7 {
        left: 58.333333333333336%
    }

    .col-ms-push-6 {
        left: 50%
    }

    .col-ms-push-5 {
        left: 41.66666666666667%
    }

    .col-ms-push-4 {
        left: 33.33333333333333%
    }

    .col-ms-push-3 {
        left: 25%
    }

    .col-ms-push-2 {
        left: 16.666666666666664%
    }

    .col-ms-push-1 {
        left: 8.333333333333332%
    }

    .col-ms-push-0 {
        left: 0%
    }

    .col-ms-offset-12 {
        margin-left: 100%
    }

    .col-ms-offset-11 {
        margin-left: 91.66666666666666%
    }

    .col-ms-offset-10 {
        margin-left: 83.33333333333334%
    }

    .col-ms-offset-9 {
        margin-left: 75%
    }

    .col-ms-offset-8 {
        margin-left: 66.66666666666666%
    }

    .col-ms-offset-7 {
        margin-left: 58.333333333333336%
    }

    .col-ms-offset-6 {
        margin-left: 50%
    }

    .col-ms-offset-5 {
        margin-left: 41.66666666666667%
    }

    .col-ms-offset-4 {
        margin-left: 33.33333333333333%
    }

    .col-ms-offset-3 {
        margin-left: 25%
    }

    .col-ms-offset-2 {
        margin-left: 16.666666666666664%
    }

    .col-ms-offset-1 {
        margin-left: 8.333333333333332%
    }

    .col-ms-offset-0 {
        margin-left: 0%
    }
}