0

Hello i have a problem with my code : 

<div class="row">
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
        </div>
        <div class="row">
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
            <div class="col-4"><img src="https://www.plumenshopus.com/i/2018/08/four-chaleur-tournante-pyrolyse-candy-fcpk-electrique-encastrable-symbole-brandt-darty-pulsee-brassee-electrolux-gaz-air-brasse-vapeur-smeg-catalyse-mini-ariston-pulse-difference-615x385.jpg" alt="bloc1" /></div>
        </div>

And i have this result : result bootstrap picture

And i want one other img likes this :

results final

How can i add other image with bootstrap for the final results ?

Thank you

Max ime
  • 13
  • 3

2 Answers2

0
<div class="container">
  <div class="row">
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
  </div>
  <div class="row">
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
    <div class="col"><img src="" alt="bloc1" /></div>
  </div>
  </div>

This code should do the work. Simple application of bootstrap documentation

See Codepen example

Buldo
  • 99
  • 7
0

As per my interpretation of your question, using a 2 columns inside a row and further dividing the first column into columns would work.

<div id="container">
  <div class="row main">
    <div class="col-8">
      <div class="row">
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
      </div>
      <div class="row">
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
        <div class="col">
          <img src="https://picsum.photos/300/600" class="img-fluid" alt="">
        </div>
      </div>
    </div>
    <div class="col-4">
      <img src="https://picsum.photos/300/1200" class="img-fluid" alt="">
    </div>
  </div>
</div>

Demo: https://stackblitz.com/edit/js-tcjrtb

Correct me if my understanding of the question is wrong.

Crazybud
  • 343
  • 4
  • 12
  • Great ! Thank you, but why the responsive doesn't works ? – Max ime Aug 31 '18 at 20:03
  • Responsive image? Didn't quite get you. Can you explain – Crazybud Aug 31 '18 at 20:07
  • The images are well placed on laptop but I want them to be one after another on phones – Max ime Aug 31 '18 at 20:27
  • Responsive for phones, you see ? – Max ime Aug 31 '18 at 20:48
  • That's because we have to explicitly mention the responsive classes like col-xs-12 to take up the full row in mobiles and col-sm-4 to take 1/3rd of screen width for any bigger screen. I made the code responsive now, check for reference. – Crazybud Sep 04 '18 at 15:13
  • @Maxime It's always a good thing if you mark the question as 'answered' so others know this question was addressed and doesn't need attention anymore, unless you have more questions regarding this. Just a friendly reminder. Hope you got all your questions answered. – Crazybud Sep 06 '18 at 20:38