Twitter Bootstrap: Place elements side by side in small resolution?

Question

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 left. The red box is the actual center of the page ( drawn later):

This should not happen since I have enclosed the div inside a container class. Why is it still happening? I want both the Headings and the thumbnails to always be in perfect center of the page.

There's another issue which is slightly different. On downsizing the browser, Even though the browser has space to accommodate 2 thumbnails side by side, still it only displays one.

This is looking extremely odd and I want to fit in 2 thumbnails as far as it can clutter free accommodate them. I added the col-sm-6 class, but still it does not behave very differently. I cannot add the col-xs-6 since on extremely small devices, I want only 1 thumbnail to be seen.

So I believe we'll have to write media queries for this? What should be done?

The HTML/CSS files are here and the website is hosted here.

Implementing the changes Suggested by @The Indian Programmer:

1. Hey, That worked ( With a problem)! Why was making it 200px distorting the center alignment? Making the width: 100% auto is causing my hover state animation to spill outside the image. How do we tackle that?

2. No! I dont want it to be col-xs-6. That is, I dont want 2 thumbnails in small scale devices. This is how it looks:

So, This is what I've done:

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

However, That does waste space:

Is there a way in which even in small scale dimensions, the website shows 2 thumbnails until it clutters?

The website is hosted at the same place and so are the HTML and CSS files.

Answer 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">
   <div class="thumbnail">
        <img src="images/Layer26.png" alt="" class="img-responsive">
        <div class="caption">
        <!-- Start Caption -->
            <div class="btn-group btn-trigger">
                <a href="#" class="btn btn-default web-link">Link</a>
                <a href="#" class="btn btn-default more-info">More</a>                                        
            </div>
        </div>
        <!-- End Caption -->                  
   </div>
   <h5 class="text-center">Artist Name 2, city</h5>
</div>

Answer 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):

<div class="col-sm-6 col-md-3 col-ms-6 text-center hover-me">
        <div class="inner">
<img src="http://lorempixel.com/g/400/400/" alt="" class="center-block">          
        <div class="caption">
            <div class="btn-group btn-trigger">
                <a href="#" class="btn btn-default web-link">Link</a>
                <a href="#" 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-me img {
    max-width: 100%;
    display: block;
}

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

    .hover-me img {
        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%
    }
}