I am using Bootstrap 4, and trying to align my columns so that I have 2 images next to each-other on medium or larger viewports, but they keep aligning themselves one on top of the other.

<div class="row">
                        <div class="col-6">
                            <img class="img-fluid"
                                src="img/1.PNG">
                        </div>
                        <div class="col col-5 d-none d-md-block">
                            <img class="img-fluid"
                                src="img/2.PNG">
                        </div>

                    </div>

Image of code and example

CodePudding user response：

That should work just fine if you take all the extra bits from the Row classes and just have Your column widths are both set to 5 though, 6 would be ideal for centering.

To assist with sleeker code, on the img classes try removing it all except for img-fluid

CodePudding user response：

Your column classes are wrong. col fills all available space, and col-5 takes 5 columns on all screens. And in this case your col-5 is overriding your col anyway. What you actually need to do:

• Use col-md-6 on both the images in place of col col-5. Your images will align themselves side by side from medium and up.

Also, you do NOT need to add d-none d-md-block to the parent and all the child classes. If you don't want to show a particular div in less than md, using it on the parent is enough.

CodePudding user response：

For demonstration purposes I went ahead and used a dummy image that I could get to work. Your structure should be as follows.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">

<div class="row">
   <div class="col-6 col-lg-6 col-sm-6">
      <img src="https://dummyimage.com/600x400/000/fff">   
   </div>
   <div class="col-6 col-lg-6 col-sm-6">
      <img src="https://dummyimage.com/600x400/000/fff">
   </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Using the different Large, Medium, and Small bootstrap classes allows for your row to adjust on different screen sizes, while maintaining that row structure. This link here is also very helpful for learning the system.