11

I have a basic bootstrap panel and I want it to be 4 columns wide. I tried adding the class col-sm-4 like I would any other div:

<div class="row">
  <div class="panel panel-default col-sm-4">
    <div class="panel-heading">Panel heading without title</div>
    <div class="panel-body">
      Panel content
    </div>
  </div>
</div>

This got the width correct, but now the title bar background is messed up:

panel with messed up header

How do I get it to conform to that width but still render the header correctly?

Sionide21
  • 2,202
  • 2
  • 21
  • 30

2 Answers2

20

Rather than specifying the panel to be the width of four columns, what if you placed the panel in a column with length-four? I don't see anywhere in the documentation that says that you can apply the col-sm-* class to a panel component. 

<div class="row">
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
</div>

And remember that the columns are supposed to add up to 12. So if you wanted empty space on the right and left of your panel you would do something like this:

<div class="row">
  <div class="col-md-4"></div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
  <div class="col-md-4"></div>
</div>

Update 1: Sionide21 noticed that the width of the column changes depending on whether or not you have nested rows. See image below.

Non-Nested Panel Versus Nested Panel

The top row of the image is what happens when the panel is placed directly inside of the column (see first row below... this is the same as the first HTML snippet of this post). The bottom half is what happens when you insert a nested row (see second row below).

<div class="row">
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel Heading</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
</div>

<div class="row">
  <div class="col-md-4 bg-primary"><p>Left Column</p></div>
  <div class="col-md-4">
    <div class="row">
      <div class="panel panel-default">
        <div class="panel-heading">Panel Heading</div>
        <div class="panel-body">Panel content</div>
      </div>
    </div>
  </div>
  <div class="col-md-4 bg-primary"><p>Rightt Column</p></div>
</div>

So it appears that when the panel is placed directly inside of a column, some margin is added to the panel (or padding is added to the column), whereas when you place the panel in a nested row, the margin (or padding) is eliminated. I do not know if this is by design or just a quirk of Bootstrap.

Update 2: koala_dev pointed out that the "nested row" example is behaving as it is because the panel is a direct child of a .row element. So in essence we're countering the padding of the column with the negative margins of the row. I don't know enough about the matter, but he says that it should be fine to leave as is, or you can create custom CSS to remove the padding from the panel, or could even try adding the .row class to the panel itself! E.g. <div class="panel panel-default row">.

Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
  • That does fix the header, but now the width doesn't match a regular `col-md-4`. If I put a row in the `col-md-4` div and then put the panel inside that, it works – Sionide21 Jul 18 '14 at 02:48
  • I don't understand what you mean by "the width doesn't match a regular col-md-4". The width of what? But according to the Bootstrap documentation (see [Nesting Columns](http://getbootstrap.com/css/#grid-nesting)) it's perfectly fine to nest rows. So if that works for you then more power to you. – Kayce Basques Jul 18 '14 at 02:54
  • It doesn't match the width of a regular `.col-md-6`. Nesting another row corrects it though. If you add that in for posterity, I'll accept your answer – Sionide21 Jul 18 '14 at 03:01
  • Interesting! I tried it out myself and was able to reproduce the effect that you are experiencing. – Kayce Basques Jul 18 '14 at 03:10
  • Your "nested" example is missing a `.col` div (since you shouldn't put any other elements directly as children of `.row` other that `.col`s) That will add the padding. – omma2289 Jul 18 '14 at 03:28
  • @koala_dev that would explain it. The "nested" example achieves the effect that Sionide21 was trying to get. But since the "nested" code above is bad form (no elements should be direct children of `.row`), what is the proper way to achieve that effect (i.e. creating a panel that takes up the entire width of a column)? Create custom CSS to get rid of the padding? Or is there a Bootstrap class that will get the job done? – Kayce Basques Jul 18 '14 at 03:36
  • Well I mean as long as you understand what's happening I see no harm in leaving the markup as it is in your example, basically you're using `.row` (which has negative margins) to counter the padding of the column. You could even add `.row` to the panel itself to avoid an extra element or as you said use custom CSS to remove the padding – omma2289 Jul 18 '14 at 03:45
1

Try adding width:100% to the .panel-heading

qtgye
  • 3,580
  • 2
  • 15
  • 30