CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
SBB
SBB

Reputation: 8970

Bootstrap Panel Styling

I am using Legacy Bootstrap 2.3 and I am having some trouble getting some CSS to work correctly.

Here is my panel and inside it, I have a table. I am trying to get that table to be full width of the panel body (no padding). I have tried removing the panel body as well as adding a padding: 0px on pannel-body but neither of those seem to work.

How can I make a special class for this panel to have the table span full width of the panel-body but not effect other panels on the page?

<div class="panel">
<div class="panel-heading"> <span class="panel-title"><small>Details</small></span>
</div>
<div class="panel-body">
    <table class="table">
        <tbody>
            <tr class="success">
                <td>1</td>
                <td>TB - Monthly</td>
                <td>01/04/2012</td>
                <td>Approved</td>
            </tr>
            <tr class="error">
                <td>2</td>
                <td>TB - Monthly</td>
                <td>02/04/2012</td>
                <td>Declined</td>
            </tr>
        </tbody>
    </table>
</div>

Fiddle: http://jsfiddle.net/556bfpgz/1/

Upvotes: 1

Views: 1700

Answers (1)

Robin Carlo Catacutan
Robin Carlo Catacutan

Reputation: 13679

You set a unique class or id for that panel then we set css styles specifically for that element and child elements.

Targeting that certain panel removing the paddings

#custom-panel.panel {
    padding: 0;
}

Then remove unnecessary margins 

#custom-panel .panel-heading {
    margin: 0;
}

Fiddle

Upvotes: 1

Related Questions