CODEWITHSUNDEEP
csstwitter-bootstrap
kacpr
kacpr

Reputation: 392

Bootstrap remove panel outline

I'm having difficulties with two things in Bootstrap 3:

Are these two things even possible?

Please have a lookenter image description here 

<div class="panel panel-primary" id="panel" style="display: block;">
<div class="panel-heading" id="heading">1387537097625.xls</div>
<div id="table">
    <table id="changes" class="table table-striped table-condensed">
        <thead style="font-weight: bold; background-color: rgb(192, 192, 192);">
            <tr>
                <td>Price List Name</td>
                <td style="font-weight: normal;">Price list</td>
                <td></td>
                <td colspan="2"></td>
                <td colspan="3"></td>
            </tr>
            <tr>
                <td>Currency</td>
                <td style="font-weight: normal;">EUR</td>
                <td></td>
                <td colspan="2">Existing price breaks</td>
                <td colspan="3">New price breaks</td>
            </tr>
            <tr>
                <td>Product Range</td>
                <td>Product Description</td>
                <td>Productid(s)</td>
                <td>1+</td>
                <td>500+</td>
                <td>1+</td>
                <td>250+</td>
                <td>1000+</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Range</td>
                <td>Some description here</td>
                <td>559</td>
                <td class="warning">17.6</td>
                <td></td>
                <td class="warning">17.6</td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>Another Range</td>
                <td>Different description here</td>
                <td>506</td>
                <td class="warning">23.15</td>
                <td></td>
                <td class="warning">23.15</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</div>

Upvotes: 5

Views: 53268

Answers (4)

Renju Jose
Renju Jose

Reputation: 389

AFAIK using a panel-borderless class is the most accurate and sufficient way for getting a panel without a border. Tried and tested.

Upvotes: 3

Andre
Andre

Reputation: 41

you can just do this it worked for me (css at top of your page(copy and paste and it will work))

<style>
            .panel {
                border: 0;
            }

            .table > thead > tr > th, .table > thead > tr > td {
                border: 0;
            }

</style>

Upvotes: 0

imwilsonxu
imwilsonxu

Reputation: 3002

.panel-borderless {
  border: 0;
  box-shadow: none;
}

Upvotes: 12

mMoovs
mMoovs

Reputation: 934

It's possible and pretty easy.

It's all in the bootstrap stylesheet and you can make your own style changes to anything there is. Rather than just writing over the lines in the bootstrap.css, I'd recommend creating your own CSS file and add it to your page after the bootstrap.css. That way your styles are loaded last and affect to the elements. And in case there's something wrong in your CSS the styles come from the bootstrap.css.

So add the files like:

<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
<link href="yourStyles.css" type="text/css" rel="stylesheet">

And the style definitions you need to do to yourStyles.css are:

.panel {
    border: 0;
}

.table > thead > tr > th, .table > thead > tr > td {
    border: 0;
}

The .panel removes the border around the whole panel and the latter removes the border-bottom which the table headings have.

Here's a Fiddle: http://jsfiddle.net/pUb6s/1/

For the future, you can find the styles effecting to some element by using some browser developer tool. Ie. if you're using Firefox just right click the element and select Inspect Element, it shows the HTML and CSS.

Upvotes: 14

Related Questions