0

This should be easy, but I'm constantly failing to get a simple bootstrap example working in plunker.

I have this simple bootstrap example in my plunker project:

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div>
      <div class="row">
        <div class="col-md-8">.col-md-8</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
      <div class="row">
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
        <div class="col-md-4">.col-md-4</div>
      </div>
      <div class="row">
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div>
    </div>
  </body>

</html>

If I hit the Run button it looks like bootstrap isn't available. Inspecting the divs with Chrom clearly shows, that bootstrap is there. But there's no formatting at all.

If I hit the preview button everything is formatted as expected.

Any ideas how to resolve this?

BetaRide
  • 16,207
  • 29
  • 99
  • 177
  • 1
    If you increase preview window then you will see it the way you want.. Happens because window width falls under smaller device width.. – BhagyashriK May 18 '16 at 11:20

1 Answers1

1

The preview window is not wide enough.

Try using col-xs-1 or col-sm-8 instead of col-md-1..!:-)

Mihriban Minaz
  • 3,043
  • 2
  • 32
  • 52
Kalrav Joshi
  • 86
  • 3
  • Rather than `instead`, use the respective classes for smaller devices `and` classes for larger ones. – Satej S May 18 '16 at 11:22