Bootstrap 3 Splitting col-md-9 into two equal columns

Question

I am working with the latest release of Bootstrap and I have the following:

<div class="col-md-3">
    <h3>One Sidebar Section</h3>
</div>
<div class="col-md-9">
    <div class="col-md-6"><h3>Half Section</h3></div>
    <div class="col-md-6"><h3>Half Section</h3></div>
</div>

But the above isn't working! How can I split my .col-md-9 into two equal parts?

Answer 1

Your almost there, you just need to add a row surrounding the two col-md-6:

<div class="col-md-3">
<h3>One Sidebar Section</h3>
</div>
<div class="col-md-9">
   <div class="row">
   <div class="col-md-6"><h3>Half Section</h3></div>
   <div class="col-md-6"><h3>Half Section</h3></div>
   </div>
</div>

See the documentation about Nesting Columns: http://getbootstrap.com/css/#grid-nesting