Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

by Asif Sharif Shahid

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="row"> <a onClick="window.print();" class="btn btn-default">Print</a>

</div>
<div class="clearfix"></div>
<table class="table table-hover borderless table-condensed">
    <thead>
        <tr>
            <th class="col-md-2">Item Code</th>
            <th class="col-md-6">Description</th>
            <th class="col-md-2">Quantity</th>
            <th class="col-md-2">Note</th>
        </tr>
    </thead>
    <tbody class="borderless">
        <tr style="border: none;">
            <td style="border: none;" colspan="4" class="text-center">
                 <h3 style="border: none;">Metal Rack</h3>

            </td>
        </tr>
        <tr>
            <td>PRE412</td>
            <td>SQUARE 3/4" X.06</td>
            <td>9</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>PRE422</td>
            <td>SQUARE 1" X .06</td>
            <td>70</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>PRE432</td>
            <td>SQUARE 1-1/4" X.06</td>
            <td>26</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>PRE442</td>
            <td>SQUARE 1-1/2"X.063</td>
            <td>24</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>PRE452</td>
            <td>SQUARE 2" X .06</td>
            <td>38</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>PRE500</td>
            <td>RECT 1/2" X 1" X.06</td>
            <td>16</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>PRE506</td>
            <td>RECT 3/4" X 1-1/2" X.06</td>
            <td>16</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>PRE512</td>
            <td>RECT 1" X 2" X .06</td>
            <td>4</td>
            <td>&nbsp;</td>
       ...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
 @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
 body {
    margin: 10px;
}
a {
    margin-left:50px;
}
tr td {
    padding: 1px !important;
}
table {
    position:relative;
}
h3 {
    border-bottom: 1px solid #ccc !important;
    text-align: left !important;
}
tbody.borderless {
    display: table-row-group;
    border: none !important;
    margin-bottom: 20px !important;
}


@media print {

    

    .borderless tbody tr td, .borderless thead tr th, .borderless tbody tr td {
        border: none !important;
    }
    .borderless tbody tr td:last-child {
        border: none!important;
    }
    .borderless {
        border: none !important;
        margin-bottom: 20px !important;
    }
    tbody {
        display: table-row-group;
        border: none !important;
        margin-bottom: 20px !important;
    }
    tbody::after {
        content: ''; display: block;
        page-break-after: always;
        page-break-inside: avoid;
        page-break-before: avoid;        
    }
    a {
        display:none;
    }
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */