CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Christian Caspovich
Christian Caspovich

Reputation: 169

Panel heading is not full

When I use the class col-lg-6 on a panel in bootstrap, the panel-heading does not fill the width of the panel.

How can this be fixed?

<div class="container">
<div class="row">
<div class="panel panel-default col-lg-6">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>

Upvotes: 8

Views: 4027

Answers (2)

Abhishek Ghosh
Abhishek Ghosh

Reputation: 2706

By giving col-lg-6 you are giving the panel the width specified in col-lg-6.Instead put the panel markup inside the div containing col-lg-6.

Here is the live working demo.

I am not sure if you want this too or not.

Upvotes: 0

Martin Noreke
Martin Noreke

Reputation: 4136

Easy fix. Move the col-lg-6 to a div tag that surrounds the panel as such:

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

Upvotes: 11

Related Questions