bootstrap 3.3.7 xs breakpoint doesn't work

Question

Why when do I go below 480px the four column doesn't stack one above another? The other three breakpoints work well but when I go below 480px the colums remain as they are located at sm breakpoint.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My Test File</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  </head>
  <body>
    <div class="container-fluid">
      <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background:red">
          column-1
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background:yellow">
          column-2
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background:orange">
          column-3
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background:aqua">
          column-4
      </div>
    </div>
  </body>

  <script src="js/jquery.js"></script>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</html>

Obsidian Age · Accepted Answer · 2018-04-04T21:52:03.397

By default, Bootstrap 3.3's .col-xs classes apply to screen widths under 768px:

Note that you're missing a closing </div> before your </body>, which may be interfering with your display. You can prevent these syntax errors by validating your markup with the W3C Validation Service.

You also need to make sure that your JavaScript is inside either your <head> or <body> tags, and that you have included jQuery (which Bootstrap's JavaScript depends on). Neither of these will affect your stacking, however.

Here's a complete, working example:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>My Test File</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background:red">
        column-1
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background:yellow">
        column-2
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background:orange">
        column-3
      </div>
      <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background:aqua">
        column-4
      </div>
    </div>
  </div>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>

Note that websites need the viewport <meta> tag
<meta name="viewport" content="width=device-width"> in order to resize correctly when viewed in the F12 Developer Tools. You should add this tag to your own websites, but for websites where it is omitted (like StackOverflow), you'll need to resize the browser windows manually to test responsiveness.

See this post for more information on the emulation bug.

I copied the code with the mistake and tested yours. I noticed that when I use chromium responsive emulator, I can't see the stack, but if I resize the window, everything work well. Maybe a problem with emulation? — Salvio, Apr 04 '18 at 21:41
Are you testing the code directly through StackOverflow? The problem is that for whatever reason StackOverflow doesn't have a `viewport` `` tag, meaning that the pages aren't resized correctly through the emulator. In order for responsiveness to work correctly, you'll need a `viewport` `` tag of: ``. I'll update my answer to include that. — Obsidian Age, Apr 04 '18 at 21:48
Thanks I forget to add to the test page the viewport meta tag. — Salvio, Apr 04 '18 at 21:54

bootstrap 3.3.7 xs breakpoint doesn't work

1 Answers1