32

Just getting started with Bootstrap.

Is there a way of having two columns in side a panel?

Thanks

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
user3319446
  • 321
  • 1
  • 3
  • 3

2 Answers2

47

Sure.. just like you'd create any Bootstrap columns:

<div class="panel panel-default">
     <div class="panel-heading">Title</div>
     <div class="panel-body">
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div> 
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div> 
        <div class="row">
            <div class="col-md-6">col1</div><div class="col-md-6">col2</div>
        </div> 
     </div>
</div>

http://www.bootply.com/114526

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
1

You can also have a panel with a table:

<div class="panel panel-default">
     <div class="panel-heading">Title</div>
     <table class="table">
        <tr>
            <td>Column 1</td>
            <td>Column 2</td>
        </tr>
     </table>
</div>
Brent Washburne
  • 12,904
  • 4
  • 60
  • 82
  • Which bypasses the efficiency of Bootstrap... Various Bootstrap components employ styles having "display: table" which have almost the same functionality as HTML tables, but are more flexible. – Gabe Hiemstra Nov 17 '16 at 14:44
  • 2
    "Panel - With tables" is a standard feature of Bootstrap. Why do you think it "bypasses the efficiency of Bootstrap"? – Brent Washburne Nov 17 '16 at 17:38
  • 3
    Maybe I am wrong, but I think @Gabe is trying to say that we should never, ever, ever in any situation whatsoever use a table, which is wrong. We shouldn't use tables for layout, of course, but I have many sections in my web app that handle raw data that should be displayed in table form. This is the Bootstrap way of adding tables to a panel. – Bobort Jan 12 '17 at 19:25
  • I second that opinion. Tables for layout = **very bad**, but if your layout is tabular it's perfectly okay to use them. – Cranio Feb 15 '17 at 08:14
  • Subject the content to the semantics test. Is your data semantically tabular (as in, is the data you're displaying contextually tabular)? Or did you just want a grid (usually a low-dimensional grid, like a few rows) for visual alignment purposes? Latter, use bootstrap grids. – cowbert Aug 25 '17 at 20:26