Boostrap how add img align with other img

Hello i have a problem with my code :

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

Possible duplicate of Nested rows with bootstrap grid system?
– 95faf8e76605e973
Aug 31 at 18:31

Use 3 col-4 per row instead of 2
– Zim
Aug 31 at 18:34

col-4

2 Answers
2

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

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

Correct me if my understanding of the question is wrong.

Great ! Thank you, but why the responsive doesn't works ?
– Max ime
Aug 31 at 20:03

Responsive image? Didn't quite get you. Can you explain
– Venkat
Aug 31 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 at 20:27

Responsive for phones, you see ?
– Max ime
Aug 31 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.
– Venkat
Sep 4 at 15:13

<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

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

搜尋此網誌

Dfyjkt