Two Bootstrap columns don't fit on the screen

Question

I'm building a simple website with gallery. Below code, to my understanding, when the width of the website is of medium devices (768px and up to 992px) should result in showing two columns of photos. However, only one column shows on the screen. I cannot group images in rows since I need them to be responsive and adapt to the device screen' width. What could be the cause of such behaviour?

<div class="container-fluid">
    <h1 class="text-center pb-4">Gallery</h1>
    <div id="lightgallery" class="text-center no-gutter">
      <a data-src="img/img-1.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-12" src="img/img-1.jpg">
      </a>
      <a data-src="img/img-2.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-2.jpg">
      </a>
      <a data-src="img/img-3.jpg">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-3.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-4.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-5.jpg">
      </a>
      <a data-src="">
        <img class="img-fluid col-lg-3 col-md-6 col-sm-10" src="img/img-6.jpg">
      </a>
    </div>
  </div>

When I set medium columns to col-md-5 they work, but considering bootstrap maxium amount of columns, which is 12, left me with this question.

score 0 · Answer 1 · answered Jan 01 '19 at 02:58

0

Col should directly embed inside a row. I believe it should be solved if you change your code to:

<div class="container-fluid">
    <h1 class="text-center pb-4">Gallery</h1>
    <div id="lightgallery" class="text-center no-gutter row">
      <a data-src="img/img-1.jpg" class="col-lg-3 col-md-6 col-sm-12">
        <img class="img-fluid" src="img/img-1.jpg">
      </a>

answered Jan 01 '19 at 02:58

Nick Mehrdad Babaki

11,560
15
45
70

I've tried that and I must admit that it made pictures go to the biggest size (they took whole horizontal space) and they even didn't align in any way. Thus I also added col classes back to images and I returned to the starting point. – Kuba Jan 01 '19 at 08:30

score 0 · Accepted Answer · answered Jan 01 '19 at 10:59

I managed to find a solution. Despite my thoughts of not using row, it was needed. I added div with class="row" and another div, one for each picture, with column classes. Below is fixed code:

<div class="container-fluid">
    <h1 class="text-center pb-4">Galeria</h1>
    <div id="lightgallery">
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-1.jpg">
            <img class="img-fluid" src="img/img-1.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-2.jpg">
            <img class="img-fluid" src="img/img-2.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-3.jpg">
            <img class="img-fluid" src="img/img-3.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-4.jpg">
            <img class="img-fluid" src="img/img-4.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-5.jpg">
            <img class="img-fluid" src="img/img-5.jpg">
          </a>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-10 mx-auto">
          <a data-src="img/img-6.jpg">
            <img class="img-fluid" src="img/img-6.jpg">
          </a>
        </div>
      </div>
    </div>
  </div>

Two Bootstrap columns don't fit on the screen

2 Answers2