Menu
I have started a migration to grid system using Bootstrap 3, but the examples in the documentation are all using DIVs: http://getbootstrap.com/css/#grid
I made a somewhat redundant code that mixes the DIV classes with TABLE tags/classes: http://getbootstrap.com/css/#tables
The problem is that the layout dobles the borders and I think the should be a better way of doing that. Any recommendations on that?
An example code in Fiddle: http://jsfiddle.net/7g8nV/1/
<div class="table-responsive"> <table class="table table-bordered"> <tr class="row"> <td class="field-label col-md-3 active"> <label>Field 1:</label> </td> <td class="col-md-9"> Value 1 </td> </tr> <tr class="row"> <td class="field-label col-md-3 active"> <label>Field 2:</label> </td> <td class="col-md-9"> Value 2 </td> </tr> <tr class="row"> <td class="field-label col-md-3 active"> <label>Field 3:</label> </td> <td class="col-md-9"> Value 3 </td> </tr> </table> </div> Thanks in advance.
524
The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
With Bootstrap 5, we've added the option to enable a separate grid system that's built on CSS Grid, but with a Bootstrap twist. You still get classes you can apply on a whim to build responsive layouts, but with a different approach under the hood.
Three Equal ColumnsUse the . col class on a specified number of elements and Bootstrap will recognize how many elements there are (and create equal-width columns). In the example below, we use three col elements, which gets a width of 33.33% each.
Remove the row class from your <tr> elements. That class makes a non-table-row element look like a table-row and adds some styles that break a standard <tr>. You can still use the "col" classes like normal:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <table class="table table-bordered"> <tr> <td class="field-label col-xs-3 active"> <label>Field 1:</label> </td> <td class="col-md-9"> Value 1 </td> </tr> <tr> <td class="field-label col-xs-3 active"> <label>Field 2:</label> </td> <td class="col-md-9"> Value 2 </td> </tr> <tr> <td class="field-label col-xs-3 active"> <label>Field 3:</label> </td> <td class="col-md-9"> Value 3 </td> </tr> </table>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
