RubyJ RubyJ - 3 months ago 20
CSS Question

Bootstrap grid not displaying

I am having a problem getting the bootstrap grid to display properly. My code is as follows

<div class="container">
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>


All I see is:
grid

Anyone know what's happening here? I have all the bootstrap.css, bootstrap-theme.css, and bootstrap.js properly included. Other things such as buttons are bring properly formatted by bootstrap.

Answer

As far as I see your 2 div's are formatted as they should? (Using Boostraps md-6).

You don't need the .col-md-6 value in your div though:

<div class="container">
        <div class="row">
            <div class="col-md-6">Your text here</div>
            <div class="col-md-6">Your text here</div>
        </div>
 </div>

For more information check out the official Bootstrap Documentation page on Grid Templates

For the grid view used in the documentation (grid.css) add the following CSS:

h4 {
  margin-top: 25px;
}
.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  background-color: #eee;
  background-color: rgba(86,61,124,.15);
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}