How can i put image tag into bootstrap grid?

Question

I'm beginner in css and bootstrap,and have document whit this instruction:

Throughout the enitre website a 12 column grid is used. This allows for maximum flexibility and to serve all devices available. Within the 12 columns grid
The content is placed within the 12 column grid (1). The grid is scaled between two fixed margins (2). Grid and margins fill the entire screen width minus the width of the main navigation (3).

for that purpose write this:

<div class="row">

            <div class="col-md-1 col-sm-1 col-lg-1">A</div>
            <div class="col-md-1 col-sm-1 col-lg-1">B</div>
            <div class="col-md-1 col-sm-1 col-lg-1">C</div>
            <div class="col-md-1 col-sm-1 col-lg-1">D</div>
            <div class="col-md-1 col-sm-1 col-lg-1">E</div>
            <div class="col-md-1 col-sm-1 col-lg-1">F</div>
            <div class="col-md-1 col-sm-1 col-lg-1">G</div>
            <div class="col-md-1 col-sm-1 col-lg-1">H</div>
            <div class="col-md-1 col-sm-1 col-lg-1">I</div>
            <div class="col-md-1 col-sm-1 col-lg-1">J</div>
            <div class="col-md-1 col-sm-1 col-lg-1">K</div>
            <div class="col-md-1 col-sm-1 col-lg-1">L</div>

        </div>

now want put image tag into A div:

<img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg"/>

but now page not responsive,want that image show center of <div class="row">,how can i solve that?thanks all.

Answer 1

Well, your question is not really clear. Please have a look at this Fiddle and elaborate more on that what you exactly want to do or send us a design or any visual things can help.

Cheers

img {
    display: block;
    margin-left: auto;
    margin-right: auto
}

<div class="row">
  <div class="col-sm-1">A</div>
  <div class="col-sm-12">
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS2Xjhc-NPN5UAWzKdY3Kpl29Tyt-zCC8aOd3Gez8i2zrF3BS9bSQ" />
  </div>
  <div class="col-sm-1">B</div>
  <div class="col-sm-1">C</div>
  <div class="col-sm-1">D</div>
  <div class="col-sm-1">E</div>
  <div class="col-sm-1">F</div>
  <div class="col-sm-1">G</div>
  <div class="col-sm-1">H</div>
  <div class="col-sm-1">I</div>
  <div class="col-sm-1">J</div>
  <div class="col-sm-1">K</div>
  <div class="col-sm-1">L</div>
</div>