How can I put an image tag in the boot grid?

Question

I start in css and bootstrap and have a document with 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 this 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 I want to put the image tag in the div:

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

but now the page is not responding, you want the image showing the center <div class="row"> , how can I solve this? thank you all.

Answer 1

Well, your question is not entirely clear. Please take a look at this script and clarify that what you definitely want to do or send us a design or any visual things can help.

Greetings

 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 take a look at a new example, I really do not know what you want to do, but you can play a lot with cols, and usually there is no need to add any fields! But if for some reason you want to add fields, you can define a class (you can call it what you want), and then you can determine the number of fields:

In this example, I called it an “asset”: you can write it like this:

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

or as follows:

  .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 remain inside the bootstrap column, you will need additional css:

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

Your html will look like this if you want to have an image inside an A div (it will be to 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 use only col-sm , it does the same effect of others on large and medium screens.

If you want the image to be always in the center, you will need to use an offset. An offset is just an empty column that goes to the left of your columns. Depending on the size you want, if you do it higher, your image will always be in 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 contain 12 columns. In the above order, I placed 5 empty columns to the left of the image, which occupies 2 columns, and then to the right of 5 columns to the right to complete 12 columns.

Answer 4

what you can do is add a class to the div tag and set the 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 it can help