Bootstrap 4 column sizing not working in Google Chrome


Ask A Question





Login To post a 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.

For more info please click herehttps://stackoverflow.com/q/51750748



Have a question or need a custom quote?
info@smartinfocare.com