CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapgoogle-chromefirefox
Chris Lyons
Chris Lyons

Reputation: 61

Bootstrap 4 column sizing not working in Google Chrome

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.

Upvotes: 6

Views: 7819

Answers (3)

Ajay Kudva
Ajay Kudva

Reputation: 179

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.

source: https://getbootstrap.com/docs/4.0/layout/grid/

<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.

Upvotes: 2

Anil K.
Anil K.

Reputation: 251

You are missing this in head tag.

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

Upvotes: 16

Michal D
Michal D

Reputation: 425

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.

Upvotes: 0

Related Questions