Bootstrap img-responsive class not working correctly

Question

I am currently having a problem where the bootstrap img-responsive class isn't working as it should due to me needing the image to be as far right in the div box as possible. I have two identically sized arrows which surrounds titles of my site. When the browser is scaled down to mobile size, the left arrow appears smaller and more distorted than the right counterpart.

Full Sized Title

Phone Sized Title

HTML:

        <div class="row">
            <div class="col-lg-3"> </div> 
            <div class="col-xs-3 col-lg-2 arrow-right">
                <img class="img-responsive img-right" src="img/arrow-right.png" alt="">
            </div>
                <div class="col-xs-6 col-lg-2 text-center">
                    <h2 class="section-heading">RSVP</h2>
                </div>
            <div class="col-xs-3 col-lg-2 arrow-left">
                <img class="img-responsive img-left" src="img/arrow-left.png" alt="">
            </div>
            <div class="col-lg-3"> </div>
        </div>

CSS:

.arrow-right {
   padding-top: 12px;
}

.arrow-left {
    padding-top: 12px;
    padding-left: 0;
 }
@media (min-width: 768px) {

  .img-right {
      display: block;
      margin: auto;
      margin-left: 34px;

  }
  .img-left {
      margin: auto;
      margin-right: 30px;
  }

}

My question would be, is there an easier way to get these arrows as close to the titles as possible and have them scale down to phone sized perfectly?

Answer 1

I think the blurry image is due to display: block , for getting the image as close to the text as possible you could consider using ::after or ::before pseudo-elements. Also you could try the following HTML:

<div class="col-xs-3 col-lg-2 arrow-right">    
        </div>
            <div class="col-xs-12 col-lg-6 text-center">
                <img class="img-responsive img-right" src="img/arrow-right.png" alt="">
                <h2 class="section-heading">RSVP</h2>
                <img class="img-responsive img-left" src="img/arrow-left.png" alt=""> 
            </div>
        </div>
</div>

Also, could you post a fiddle or http://www.bootply.com/ ?

EDIT -- (after bootply response)

using a little CSS i got it working (without the use of media queries etc.). The CSS is now a lot less and I hope this is what you are looking for (because the images are as close as possible to the text). Using float: left to the img, h2 and a little padding-top: 24px for the images got it lined up. See bootply: http://www.bootply.com/2Hp6stSs9B

Answer 2

Change the XS and make 4/4/4

<div class="row">
            <div class="col-lg-3"> </div> 
            <div class="col-xs-4 col-lg-2 arrow-right">
                <img class="img-responsive img-right" src="img/arrow-right.png" alt="">
            </div>
                <div class="col-xs-4 col-lg-2 text-center">
                    <h2 class="section-heading">RSVP</h2>
                </div>
            <div class="col-xs-4 col-lg-2 arrow-left">
                <img class="img-responsive img-left" src="img/arrow-left.png" alt="">
            </div>
            <div class="col-lg-3"> </div>
        </div>