Looking to convert the table below into bootstrap rows and columns. I'm not very familiar with bootstrap, but would like to give it a try. Any guidance on where to start would be greatly appreciated. Thank you for your help!
<div id="section1">
<header>WEEKLY HOURS</header>
<table class="section1table">
<tr class="last-row">
<th>Clocked</th>
<th>Regular</th>
<th>Overtime</th>
<th>Incentive</th>
<th>Holiday</th>
<th>Personal</th>
<th>Vacation</th>
<th colspan=4>Off-Clock</th>
<th class="total"><strong>Total</strong></th>
</tr>
<tr class="last-row">
<td id="clockHours">clockHrs</td>
<td id="regularHours">regularHrs</td>
<td id="overtime">overtimeHrs</td>
<td id="Incentive">incentiveHrs</td>
<td id="holiday">holidayHrs</td>
<td id="personal">sickHrs</td>
<td id="vacation">vacationHrs</td>
<td colspan=4>offClockHrs</td>
<td class="total">totalHrs</td>
</tr>
</table>
#printPage
{
margin: 0px;
padding: 0px;
width: 910px;
margin-bottom: 0.4%;
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
}
#timetitle
{
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
font-weight: bolder;
font-size: 14pt;
margin-bottom: 0%;
}
#name
{
font-family: 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Open Sans', 'Helvetica Neue', 'sans-serif';
font-weight: normal;
margin-top: 0;
margin-left: 15px
}
div#namesection
{
margin-top: 1%;
padding: 0px;
width: 670px;
margin-left:0%;
}
div#section1
{
margin-top: 5px;
padding: 0px;
border-top: 2px solid black;
width: 870px;
margin-bottom: 5px;
}
div#section1 header
{
margin-left: 10px;
margin-top: 5px;
margin-bottom: 0px;
font-weight: bold;
}
table.section1table td
{
vertical-align:top;
text-align: left;
padding: 5px;
}
table.section1table th
{
font-weight: normal;
padding: 0 5px 0 5px;
vertical-align:top;
text-align: left;
}
div#section2 /*labeled wrong, this is the sec2 header*/
{
padding: 0;
border-top: 2px solid black;
width: 870px;
margin-left:0;
margin-bottom: 0;
}
table.section1table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 0%;
margin-top: 0.15%;
}
div#section2 header /*labeled wrong, this is the actual box in sec2*/
{
margin-left: 0.5%;
margin-top: 5px;
font-weight: bold;
font-size: 14pt;
}
table.section2table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-bottom: 0;
margin-top: .15%;
}
table.section2table th,
table.section2table td
{
vertical-align:top;
text-align: left;
font-size: 12pt;
/* The following rule (white-space) is used to allow the last cell */
/* to fill the remaining width. */
white-space: nowrap;
}
table.section2table th
{
/* padding to keep THs right aligned with TDs */
padding: 0 5px 0 5px;
}
table.section2table td
{
padding: 5px;
}
table.section2table tr.last-row th,
table.section2table tr.last-row td
{
background-color: #dddddd;
}
table.section2table tr.last-row th.total,
table.section2table tr.last-row td.total
{
/* The following rule (width) is used to allow the last cell to fill */
/* the remaining width. */
width: 99%;
text-align: right;
}
Any tips on converting this HTML/CSS setup to use Bootstrap's rows and cols?