Bootstrap 4 column sizing not working in Google Chrome

Question

When using the Bootstrap grid and resizing the page below the minimum column size my columns aren't automatically stacking. The smallest size columns isn't even being recognized, only the second largest column size and up are working. I would have assumed I was using the grid incorrectly if it didn't work as expected in Firefox and the Atom HTML Preview.

Here is my code...

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>bootstrap interface</title>
    <link rel="stylesheet" href="css/bootstrap.css">
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-sm-4 col-md-6 col-lg-12" style="background-color: red">
          <h1>Red</h1>
        </div>
        <div class="col-sm-4 col-md-6 col-lg-6" style="background-color: white">
          <h1>White</h1>
        </div>
        <div class="col-sm-4 col-md-12 col-lg-6" style="background-color: blue">
          <h1>Blue</h1>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

  </body>
</html>

Pictures

In chrome: bootstrap-failing-chrome

In firefox: bootstrap-working-firefox

I thought it was a problem with using the cdn bootstrap but running it locally didn't fix the problem either.

I tested it with multiple versions of Chrome and removed all of my css to see if it was something I was overriding in bootstrap.

This is the first question I hit when searching for a solution. If you're having issues particularly with tables, perhaps view the following question: https://stackoverflow.com/questions/15115052/how-to-set-up-fixed-width-for-td — DubDub, Feb 19 '19 at 09:42

score 16 · Answer 1 · answered Aug 08 '18 at 17:42

16

You are missing this in head tag.

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

answered Aug 08 '18 at 17:42

Anil K.

251
1
7

1

HAHAAHA YESS! I love you! Wow that was silly of me. Upvotes when I gain access (I joined today) – Chris Lyons Aug 08 '18 at 18:00
Worked for me too. Could you explain ? Look like white magic to me :) – Cédric ZUGER Oct 12 '18 at 17:02
@Cédric ZUGER The meta viewport is the user's visible area of a web page that varies with the device, and will be smaller on a mobile phone than on a computer screen. This means that the browser will render the width of the page at the width of its own screen. – Anil K. Oct 15 '18 at 12:34
Ok. Thank you :) – Cédric ZUGER Oct 18 '18 at 17:02

score 2 · Answer 2 · edited Aug 17 '18 at 03:18

Your code is right. The bootstrap is linked properly. Just a slight misconception you're facing here. When Google Chrome resizes down to 576px wide, Bootstrap considers the parameters of col-xs-* and since you've not provided the parameters it is considering it as default col-xs-1.

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>bootstrap interface</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-xs-4 col-sm-4 col-md-6 col-lg-12" style="background-color: red">
          <h1>Red</h1>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-6 col-lg-6" style="background-color: white">
          <h1>White</h1>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-12 col-lg-6" style="background-color: blue">
          <h1>Blue</h1>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

  </body>
</html>

I think this must work for you now.

You are right, I realized that my problem isn't with the col-sm-* but instead that the columns aren't automatically wrapping when resizing! I am updating the post — Chris Lyons, Aug 08 '18 at 16:25
So is it still failing or working fine? Upvoting will help. :) — Ajay Kudva, Aug 08 '18 at 16:27
it is still failing :( It isn't recognizing the xs columns but now it is recognizing the sm columns. I need them to wrap when scaling down but instead they are shrinking. — Chris Lyons, Aug 08 '18 at 16:30

Michał Drabik · Answer 3 · 2018-08-08T17:26:34.707

0

Try using this

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>bootstrap interface</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>

    <div class="container">
      <div class="row">
        <div class="col-12 col-sm-4 col-md-6 col-lg-12" style="background-color: red">
          <h1>Red</h1>
        </div>
        <div class="col-12 col-sm-4 col-md-6 col-lg-6" style="background-color: white">
          <h1>White</h1>
        </div>
        <div class="col-12 col-sm-4 col-md-12 col-lg-6" style="background-color: blue">
          <h1>Blue</h1>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="js/bootstrap.bundle.min.js"></script>

  </body>
</html>

Please note that the xs is not needed with Bootstrap 4.

edited Aug 08 '18 at 17:26

answered Aug 08 '18 at 16:36

Michał Drabik

425
4
8

Ok, now I am going crazy. If I copy your exact code into my editor, save and run it in chrome from a local HTML file, it doesn't work. But when I try the "run code snippet" button and hit "full page" it works totally fine! I pushed it to my GitHub to see if its how chrome runs things locally and unfortunately, it isn't working there either. – Chris Lyons Aug 08 '18 at 16:48
The same thing happens in chrome on my phone. – Chris Lyons Aug 08 '18 at 16:54
I've updated the snippet to use proper bootstrap css. Can you check it now? – Michał Drabik Aug 08 '18 at 16:56
I've also run it locally in my Chrome and it's working. – Michał Drabik Aug 08 '18 at 16:58
So if I resize chrome there are no issues but when I inspect and select all of the different phone's screens it is still very small and at the col-md sizes. – Chris Lyons Aug 08 '18 at 17:04
You can adjust the sizes at specific breakpoints by using different numbers in proper css classes, e.g. when you want to have bigger columns at md breakpoint you could use col-md-8, but remember that the limit is 12. – Michał Drabik Aug 08 '18 at 17:08
Yes but the smallest columns sizes aren't even being recognized. I'm just lost because it works fine in the snippet viewer and in jsFiddle. – Chris Lyons Aug 08 '18 at 17:15
What's the bootstrap version you're using? – Michał Drabik Aug 08 '18 at 17:16
If it's bootstrap 4 then the xs should not be used, otherwise it must be used. – Michał Drabik Aug 08 '18 at 17:25
Bootstrap 4, I was never using xs. Just sm md and lg. – Chris Lyons Aug 08 '18 at 17:42
Then you should be using col-x when adjusting smallest breakpoint. – Michał Drabik Aug 08 '18 at 18:16

Bootstrap 4 column sizing not working in Google Chrome

Pictures

3 Answers3