CODEWITHSUNDEEP
twitter-bootstrap-3
Greg Rogers
Greg Rogers

Reputation: 1031

Bootstrap: Progress bars in table-condensed

If I add a Bootstrap 3 progress bar to a Bootstrap table with table-condensed, I lose the "condensed" part of the rows (they get taller). Is there a default minimum height to a progress bar that would force table-condensed rows to be larger?

Here's an example of the behavior I'm trying to "fix":

JSFiddle: Condensed table/progress bar example

<table class='table table-condensed table-striped'>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
</table>

<br/>

<table class='table table-condensed table-striped'>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
    <tr>
        <td>one</td>
        <td>
            <div class='progress progress-striped'>
                <div class="progress-bar progress-bar-warning" role="progressbar" style="width: 50%;">
                    Progress
                </div>
            </div>
        </td>
        <td>three</td>
    </tr>
    <tr>
        <td>one</td>
        <td>two</td>
        <td>three</td>
    </tr>
</table>

Upvotes: 4

Views: 13180

Answers (2)

Adam Halls
Adam Halls

Reputation: 71

You need to override the margin CSS property for the progress class.

.table-condensed .progress {
    margin-bottom: 0 !important;
}

Add this to the head of the page as additional styles or to your css as an additional class.

Upvotes: 7

Greg Rogers
Greg Rogers

Reputation: 1031

Bootstrap adds a margin-bottom: 20px; to its progress bar divs. Overriding that sized table rows appropriately for me.

Upvotes: 11

Related Questions