Menu
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>
542
At Twitter, Bootstrap has quickly become one of our many go-to front-end tools when starting new applications and sites.
Bootstrap's grid system allows up to 12 columns across the page.
Just check the Grid System block on the Customize page. The @grid-columns field allows to set a different number of columns, and the @grid-gutter-width field lets you change the gutter width. Customizers are convenient when bootstrap. css is the only file you need and when you don't work with preprocessors.
Populate the 'row' div with 5 divs with class 'col'. Because Bootstrap 4.0+ grid system has now shifted to Flexbox, the columns will arrange by themselves into five equally sized DOM elements.
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>
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
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
