Bootstrap 4 Overlapping Columns in Mobile View

Question

So, I know this seems to be a fairly simple functionality, but I've spent more than a few days trying to get this to work. Everything works well in full width, but I've tried a number of different reasonable configurations with col-xs-12 col-sm-12 col-md-6 col-lg-4, (see here and many other places I've tried finding an answer) etc. but can't seem to get the columns to drop from 3 to 2 to 1. I think it is something else at this point. It will go to 1 column in portrait mode, but landscape gets overlapped. Also not sure why the center container in the screenshot is not perfectly centered (it's off to the right).

Straight to it then:

Screenshots:

Overlapping in landscape:

Single column in portrait:

Normal in full desktop scale:

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="static/style.css">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Basic HTML File</title>
  </head>
  <body style="background-color:#F4F7F6;">
    <div class="container">
      <div class="row" style="padding-top:2%;">
        <div class="col-md-12">
          <h1><center>Webpage Title</center></h1>
        </div>
      </div>
      <div class="container-fluid"><div class="card-columns"><div class="row">
          <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
         <div class="row">
           <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
           </div>
         </div>
         <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                       Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
         <div class="row">
             <div class="col-xs-4 col-sm-4 col-md-6">
               <div class="card" style="width: 20rem;">
                 <div class="img-round">
                   <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-responsive" style="width:100%;border-radius:5px 5px 0 0;"></a>
                 </div>
                 <div class="card-body">
                   <h4 class="card-title">Card Title</h4>
                   <p class="card-text" style="overflow:hidden;text-overflow:ellipsis;">
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                        Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
                   </p>
                 </div>
               </div>
             </div>
         </div>
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  </body>
</html>

CSS:

Nothing significantly custom, just some stuff for the module div to expand text areas. Other stuff should be inline.

UPDATE

OK, figured out some of my problems but introduced an old one. Changes made:
1. Move row outside of col-12 2. Change img-responsive to img-fluid 3. Remove card-columns div 4. Remove extra row div (i don't think this was in my original work, i think this was an accident during copy/paste since there was no closing tag either)

However this has re-introduced a previous problem I had of the cards not flowing vertically with uneven text. Not all text will be the same length, so removing the text-truncate directive renders the following results:

(should not have extra space where red X is)

and should flow like:

Also, while the high level card columns collapse from 3 -> 2 (great!), there is still some overlap at resolutions that border this transition period (see screenshot below, and some is visible in the screenshot above also), so I think I need to enforce a minimum border/padding:

Charu Maheshwari · Accepted Answer · 2018-07-20T05:16:49.283

There were some issues in the HTML structure. I have tried modifying it. Now we can integrate what you are intending to.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet" />


<body style="background-color:#F4F7F6;">
  <div class="container">
    <div class="row" style="padding-top:2%;">
      <div class="col-md-12">
        <h1>
          <center>Webpage Title</center>
        </h1>
      </div>
    </div>
    <div class="container-fluid">
      <div class="row">
        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra
                Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra
                Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>

        <div class="col-12 col-md-6 col-lg-4">
          <div class="card">
            <div class="img-round">
              <a href="https://www.yahoo.com" title="" target="_blank"><img src=http://www.independentmediators.co.uk/wp-content/uploads/2016/02/placeholder-image.jpg class="img-fluid" style="border-radius:5px 5px 0 0;"></a>
            </div>
            <div class="card-body">
              <h4 class="card-title">Card Title</h4>
              <p class="card-text text-truncate" style="overflow:hidden;text-overflow:ellipsis;">
                Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text. Extra Text. Extra Text. Extra Text. Extra
                Text. Extra Text. Extra Text. Extra Text.Extra Text.Extra Text.
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>

</body>

Thank you for your answer, it looks to be on the right track. Forgive me, perhaps I'm tired and I'll have to look this over again later, but I am having trouble seeing the obvious problem in my original work. I see that you changed the cols (I tried the one you gave before `col-12 col-md-6 col-lg-4`), also removed the card-columns, and removed the JS from the end (not sure if this matters). If I affect these changes manually, it still doesn't work. But if I copy/paste your sample it does. Can you point out the html structure issues you mentioned please? Thank you... so much time spent on this. — user58446, Jul 19 '18 at 09:41
I see you also removed the collapsible panel, was this causing sizing problems in mobile mode? I will need to resolve that if so. — user58446, Jul 19 '18 at 09:44
I suggest you to add your code at relevant places in my structure. and if you still face any problem, I could help you there. — Charu Maheshwari, Jul 19 '18 at 10:17
OK. Figured out some of the additional changes you made. Awesome! However, a previous problem was reintroduced that was covered up by the text-truncate tag (text will be of different lengths) and I also need to enforce a border between the columns to prevent overlapping at border resolutions. See update above and we can get this marked as answered and upvoted. Thanks again for all your help. — user58446, Jul 19 '18 at 23:27
So I guess this was the source of my original problem with card-columns: https://stackoverflow.com/questions/34140793/bootstrap-4-responsive-cards-in-card-columns. Unfortunately, adding the suggested CSS media directives had no effect. Not sure which way to go at this point. — user58446, Jul 20 '18 at 04:07
First, for problem 2: remove "width:20" on .card HTML element. it will solve the overlapping issues. — Charu Maheshwari, Jul 20 '18 at 05:29
For problem 1: it's going to be little complicated. With flex you will not be able to achieve the structure. You need to move back to float (Bootstrap 3.x.x). I have created a sample for you to achieve the same "https://jsfiddle.net/edjgot90/1/". Let me know if you need any other assistance. — Charu Maheshwari, Jul 20 '18 at 05:30
Yes, removing width:20 from the card also removed the overlap case. Marked as answered and upvoted for your effort. Thank you. The jsfiddle link you posted is broken :( Would it be a bad idea to try and combine bootstrap 3 and bootstrap 4 (to keep the cards and for future usability)? — user58446, Jul 20 '18 at 08:47
Updated link https://jsfiddle.net/edjgot90/1/ Combining bootstrap 3 and 4, I will not suggest. But what you can do is use Bootstrap 4.0, and create your structure with float (copy bootstrap 3.x styles) and not use row (from bootstrap 4.0). — Charu Maheshwari, Jul 20 '18 at 09:20

Bootstrap 4 Overlapping Columns in Mobile View

1 Answers1