Bootstrap 4 column sizing not working in Google Chrome
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.
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.