如何将图像标记放入bootstrap网格？

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> 

Answer 2

Please have a look at the new example, I really have no idea what you want to do but you can play a lot with the cols and usually there is no need to add any margins! But if because of any reasons you want to add margins you can define a class (you can call it what ever you want) and then you can define the amount of margins :

In this example I called it "asset" : you can write it either on this way :

    .asset {
      margin-right: 20px;
      margin-left: 20px;
    } 

or on this way:

    .asset {
       margin: 0 10px 20px 30px;
     }

    0    ===> shows margin-top(for zero there is no need to add "px")
    10px ===> shows margin-right
    20px ===> shows margin-bottom
    30px ===> shows margin-left

now you can write :

    .asset {
       margin : 0 20px 0 20px;
    }


  
 
  
  
  
 
   
 
    
    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>
 
   
 
  



  
 
  
  
  
 
   
 
    
    img {
        display: block;
        margin-left: auto;
        margin-right: auto
    }
    .asset {
      margin-right: 50px;
      margin-left: 50px;
    }
 
    
    <div class="row asset">
      <div class="">A</div>
      <div class="col-xs-12">
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS2Xjhc-NPN5UAWzKdY3Kpl29Tyt-zCC8aOd3Gez8i2zrF3BS9bSQ" />
      </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>
 
   
 
  

Answer 3

If you want your image to stay inside a bootstrap column, you would need an extra css:

img {
    max-width: 100%;
    max-height: 100%;
}

Your html will look like this if you want to have the image inside the A div (it will be on the left of the screen):

<div class="row">
  <div class="col-sm-1">
    <img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="">
  </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>

You do not need to use col-sm , col-md and col-lg together. If you are using just the col-sm it does the same effect of the others to large and medium screens.

If you want the image at the center always, you will need to use offset. Offset is just a blank column that goes on the left of your columns. Depending on the size you want, if you do like above, your image will always be at the center:

<div class="row">
      <div class="col-sm-2 col-sm-offset-5">
        <img src="http://hearstcommerce.ca/customcontent/members/premium/sample.jpg" alt="">
      </div>
</div>

Just remember that a row can only have 12 columns. The way above I placed 5 blank columns to the left of the image, that takes 2 columns and then there are more 5 five columns to the right to complete the 12 columns.

Answer 4

what you can do is add a class in div tag and set image using css

.image1 {
    background-image : url('../img/sample.jpg');
 }

and ten in html

<div class="col-md-1 col-sm-1 col-lg-1 image1">A</div>

try, this may help