Menu
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>
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.
306
You are missing this in head tag.
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
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.
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
