How to create a grid header using Twitter Bootstrap?

Question

How can a bootstrap grid be styled with a simple header like the picture below?

When I try changing the background color of the first row, the color doesn't extend to the edge of the grid because of the grid padding. When I remove the left/right grid padding, it messes up the rounded corners.

The html looks like this:

<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px">
<div class="row-fluid">
    <div class="span3">Name</div>
    <div class="span3">Count</div>
</div>
<div class="row-fluid">
    <div class="span3">Joe</div>
    <div class="span3">10</div>
</div>
<div class="row-fluid">
    <div class="span3">Bob</div>
    <div class="span3">7</div>
</div>
</div>

Answer 1

Does this help? rounded corners on divs with background color.

<div class="container-fluid" style="border: solid 1px black; border-radius: 10px; max-width: 400px; padding: 0px">
    <div class="row-fluid" style="background-color: #f0f0f0; border-top-left-radius: 10px; border-top-right-radius: 10px;">
        <div class="span3">Name</div>
        <div class="span3">Count</div>
    </div>
    <div class="row-fluid">
        <div class="span3">Joe</div>
        <div class="span3">10</div>
    </div>
    <div class="row-fluid">
        <div class="span3">Bob</div>
        <div class="span3">7</div>
    </div>
</div>

Answer 2

This is one of those cases where you probably should be using a table. Screen reader users will appreciated it, and Bootstrap has styles built in that should help.

http://twitter.github.com/bootstrap/base-css.html#tables