What steps do I need to take to transform this HTML snippet into a Bootstrap design

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?

Answer №1

To begin with, it is important to explore and understand bootstrap so that you can implement tasks independently.

If your focus is solely on this table, then the code below will suffice.

The concept at play here involves the bootstrap grid structure. Instead of using <tr>, we utilize <div class="row"> within a grid that is divided into 12 columns. For instance, in this snippet, we employ <div class="col-sm-1">, while for a cell with colspan=4, you can use class="col-sm-4".

In this specific example, we have kept the display area small, hence have used col-sm-*. For larger displays, consider using col-md-*/col-lg-*. Refer to Bootstrap documentation for further insights.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-1 text-center">Clocked</div>
    <div class="col-sm-1 text-center">Regular</div>
    <div class="col-sm-1 text-center">Overtime</div>
    <div class="col-sm-1 text-center">Incentive</div>
    <div class="col-sm-1 text-center">Holiday</div>
    <div class="col-sm-1 text-center">Personal</div>
    <div class="col-sm-1 text-center">Vacation</div>
    <div class="col-sm-4 text-center">Off-Clock</div>
    <div class="total col-sm-1 text-center"><strong>Total</strong></div>
  </div>

  <div class="row">
    <div class="col-sm-1 text-center" id="clockHours">clockHrs</div>
    <div class="col-sm-1 text-center" id="regularHours">regularHrs</div>
    <div class="col-sm-1 text-center" id="overtime">overtimeHrs</div>
    <div class="col-sm-1 text-center" id="Incentive">incentiveHrs</div>
    <div class="col-sm-1 text-center" id="holiday">holidayHrs</div>
    <div class="col-sm-1 text-center" id="personal">sickHrs</div>
    <div class="col-sm-1 text-center" id="vacation">vacationHrs</div>
    <div class="col-sm-4 text-center">offClockHrs</div>
    <div class="total col-sm-1 text-center">totalHrs</div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Failed PHP response when jQuery was called

I'm working on a project that involves two files: one PHP and one HTML. The HTML file acts as the user interface where users input their queries, while the PHP file handles the processing and events before returning the output back to the HTML file. I ...

Left-hand navigation panel that complements entire screen

Web Design .sidenav { height: 100%; position: relative; overflow-y: scroll; background: #000000; width: 15%; } Ensuring the menu covers the full screen correctly by setting its height to 100% is effective, but it may appear awkward wh ...

"Trouble arose when I tried to incorporate additional functions into my JavaScript code; my prompt feature is not

As a beginner in HTML and JS coding, I am working on creating a page that prompts user input for a name and then executes animations using radio buttons. However, after adding functions for radio button changes, my prompt is no longer functioning properly. ...

What role do colors and tables play in Javascript?

Preparing for my upcoming Web Development exam, I stumbled upon an intriguing question:https://i.sstatic.net/m9T0F.png Here's how I tackled it: function pallete() { var components = ["00", "33", "66", "99", "CC", "FF"]; var conte ...

`No valid form submission when radio buttons used in AngularJS`

Within my form, I have a single input text field that is required (ng-required="true") and a group of radio buttons (each with ng-model="House.window" and ng-required="!House.window"). Interestingly, I've discovered that if I select a radio button fir ...

Styling the TinyMCE Toolbar within a Div container

While working on creating a unified TinyMCE toolbar that is fixed at the top of multiple containers within a div wrapper, I encountered an issue where the CSS styling of the toolbar was lost after wrapping. The toolbar only displayed hyperlink URLs inste ...

Accordion nested within another accordion

I am facing a challenge while trying to nest an accordion within another accordion. The issue is that the nested accordion only expands as much as the first accordion, requiring additional space to display its content properly. Any assistance with resolvin ...

Assigning the Style property to an element using a string that includes HTML tags

My HTML string is populated with elements such as button, li, span, and more. I am looking to add specific styles to buttons based on their class name. For example, if button.btn { some styles } and button.btn-success { some other styles } O ...

Unable to Achieve Full Height with Vuetify Container

Challenge: I'm facing an issue with my <v-container> component not consistently spanning the entire height of the application. Despite trying various methods such as using the fill-height property, setting height: 100%;, height: 100vh;, and expe ...

Interactive Div Updates Dropdown Selections Automatically

// function to add set of elements var ed = 1; function new_server() { ed++; var newDiv = $('#server div:first').clone(); newDiv.attr('id', ed); var delLink = '<a class="btn btn-danger" style="text-align:right;m ...

I'm curious about the process behind this. Can I copy a Figma component from a website and transfer it into my

Check out this site for an example: Interested in how uikit.co/explore functions? By hovering over any file, a copy button will appear allowing you to easily paste it into your Figma artboard. Want to know how this works and how to implement it on your o ...

Enhance iframe with hover effect

I'm currently working on a unique WordPress blog design where images and iframes (YouTube) transition from monotone to color upon hover. So far, I've successfully implemented the grayscale effect for images: img { -webkit-filter: grayscale(100% ...

Tips for changing the state of a toggle button with JavaScript

I need help creating a toggle button. To see the code I'm working on, click here. In my JavaScript code, I am reading the value of a 'checkbox'. If the value is true, I add another div with a close button. When the close button is clicked, ...

Creating a seamless vertical marquee of several images that continuously scroll from bottom to top without interruption can be achieved by following these

Currently, I am seeking to design a mobile-friendly HTML page that features a border with multiple color images moving smoothly from bottom to top on both the right and left sides of the mobile screen. The transition should be seamless without any gaps o ...

Tips for preventing vertical spaces between table header cells in material-UI

Is there a way to remove the vertical gaps between header cells in the MUI table? To see an example of the issue, check out this codesandbox link: https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json I have attempte ...

Tips on displaying a single column in Bootstrap when only one item is present and switching to two columns when two items are present

Currently, I am utilizing the row class in Bootstrap which contains two columns, one for X and one for Y. There are scenarios where either the X column, the Y column, or both may be present within the row. Since a row can have up to 12 columns, when only t ...

The hover effect for a :before class is not functioning as intended

I have created a dropdown menu with a triangle at the top in this style: When the cursor hovers over only the triangle, it appears like this: However, when the cursor is over the div, the hover effect for both elements is activated as shown here: I am t ...

delivering the user's ID and username from php back to the website

Currently, I am in the process of creating a sign-in feature for my website (index.php): To achieve this, I have designed a form that will submit information to the validation-sign-in.php file for processing: (Encryption will be implemented at a later st ...

An alternative method for storing data in HTML that is more effective than using hidden fields

I'm trying to figure out if there's a more efficient method for storing data within HTML content. Currently, I have some values stored in my HTML file using hidden fields that are generated by code behind. HTML: <input type="hidden" id="hid1 ...

What steps can be taken to align the description in the center of the div?

I am working on an image slider where the description slides in from left to right. My goal is to align the text justified and center it on the page. However, when I try adding CSS properties, it doesn't seem to have any effect. setting.$descpanel=$( ...