What is the best way to transform an HTML table into the Bootstrap grid system without losing any spacing?

To ensure compliance with the Americans with Disabilities Act, I needed to use an unordered list in my cart instead of a table. Unfortunately, this change has caused some issues with the CSS styles that were previously applied.

Currently, I am attempting to convert my HTML table into a list by using containers and rows within each list item. However, I am struggling to get it to look exactly like it did before.

Production

    <head>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
    </head>
  <body>
            <div class="cart-hover" tabindex="-1">
                <div class="cart-hover-header">
                    <b>Subtotal: $13,654.99</b>
                    <a class="btn btn-primary pagearea" href="#" title="View Cart" data-pagearea="87">View Cart</a>
                </div>
                <table class="table table-striped">
                    <tbody><tr>
                            <td class="align-middle pl-3">
                                <div class="cart-item-img">
                                        THUMB
                                    </div>                            </td>
                            <td class="align-middle text-center">1</td>
                            <td class="align-middle text-wrap">
                                <a id="cart-item-307181" class="text-reset pagearea" href="#" title="Gibson Dave Mustaine Flying V EXP Electric Guitar (with Case)" data-pagearea="86">
                                    Gibson Dave Mustaine Flying V EXP Electric Guitar (with Case)
                                </a>
                            </td>
                            <td class="align-middle text-center pr-3">$2,799.00</td>
                        </tr>
                    <tr>
                            <td class="align-middle pl-3">
                                <div class="cart-item-img">
                                        THUMB
                                    </div>                            </td>
                            <td class="align-middle text-center">1</td>
                            <td class="align-middle text-wrap">
                                <a id="cart-item-238870" class="text-reset pagearea" href="#" title="Steinberger Spirit XT-2 Standard Electric Bass (with Gig Bag)" data-pagearea="86">
                                    Steinberger Spirit XT-2 Standard Electric Bass (with Gig Bag)
                                </a>
                            </td>
                            <td class="align-middle text-center pr-3">$449.00</td>
                        </tr>
                    <tr>
                            <td class="align-middle pl-3">
                                <div class="cart-item-img">
                                        THUMB
                                    </div>                            </td>
                            <td class="align-middle text-center">1</td>
                            <td class="align-middle text-wrap">
                                <a id="cart-item-246567" class="text-reset pagearea" href="#" title="Gibson J-45 Standard Acoustic-Electric Guitar (with Case)" data-pagearea="86">
                                    Gibson J-45 Standard Acoustic-Electric Guitar (with Case)
                                </a>
                            </td>
                            <td class="align-middle text-center pr-3">$2,549.00</td>
                        </tr>
                    </tbody>
                </table>
            </div>
  </body>

Development

<head>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
</head>

<body>
  <div class="cart-hover" tabindex="-1">
    <div class="cart-hover-header">
      <b>Subtotal: $6,247.00</b>
      <a class="btn btn-primary pagearea" title="View Cart" data-pagearea="87">View Cart</a>
    </div>

    <ul class="list-unstyled">
      <li style="justify-content: space-between; background-color: rgba(0,0,0,.05);">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 col align-middle text-center">1</div>

            <div class="col col-7 col align-middle text-wrap">
              Gibson Dave Mustaine Flying V EXP Electric Guitar (with some extra text for a second line)
            </div>

            <div class="col col-1 align-middle text-center pr-3">$2,799.00</div>
          </div>
        </div>
      </li>

      <li style="justify-content: space-between; ">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 align-middle text-center">1</div>

            <div class="col col-7 align-middle text-wrap">
              Steinberger Spirit XT-2 Standard Electric Bass (with some extra text for a second line)
            </div>
            <div class="col col-2 align-middle text-center pr-3">$449.00</div>
          </div>
        </div>
      </li>

      <li style="justify-content: space-between; background-color: rgba(0,0,0,.05);">
        <div class="container">
          <div class="row">
            <div class="col col-2 col align-middle pl-3">
              <div class="cart-item-img">
                THUMBNAIL
              </div>
            </div>

            <div class="col col-1 align-middle text-center">1</div>

            <div class="col col-7 align-middle text-wrap">
              Gibson J-45 Standard Acoustic-Electric Guitar (with some extra text for a second line)
            </div>
            <div class="col col-2 align-middle text-center pr-3">$2,999.00</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</body>

htmlcssbootstrap-4vertical-alignment

Answer №1

My understanding was that every child element within a Bootstrap row needed to be a col with a specified width. However, if the element's width remains consistent, like a thumbnail, then the col can be omitted and only applied to text elements.

    <head>
      <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css" rel="stylesheet" />
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
    </head>
    <body>

            <div class="cart-hover" tabindex="-1">
                <div class="cart-hover-header">
                    <b>Subtotal: $3,555.00</b>
                    <a class="btn btn-primary pagearea">View Cart</a>
                </div>
                                <ul class="list-unstyled ul-striped">
                    <li role="group" aria-label="product">
                            <div class="row m-0">
                                <div class="align-self-center ml-3">
                                    <div class="cart-item-img my-1">
                                            THUMBNAIL
                                        </div>
                                </div>
                                <div class="col-2 align-self-center text-center">
                                    2
                                </div>
                                <h2 class="col-11 h6 align-self-center font-weight-normal text-wrap m-0 pl-0">
                                    <a id="cart-item-334161" class="align-self-center text-reset pagearea">
                                        Paul Reed Extra Class Super Special Guitar That Spans Multiple Lines 1
                                    </a>
                                </h2>
                                <div class="col-6 align-self-center text-right">
                                    $679.00/ea
                                </div>
                            </div>
                        </li>
                    <li role="group" aria-label="product">
                            <div class="row m-0">
                                <div class="align-self-center ml-3">
                                    <div class="cart-item-img my-1">
                                            THUMBNAIL
                                        </div>
                                    </div>
                                <div class="col-2 align-self-center text-center">
                                    2
                                </div>
                                <h2 class="col-11 h6 align-self-center font-weight-normal text-wrap m-0 pl-0">
                                    <a id="cart-item-327889" class="align-self-center text-reset pagearea">
                                        Paul Reed Extra Class Super Special Guitar That Spans Multiple Lines 2
                                    </a>
                                </h2>
                                <div class="col-6 align-self-center text-right">
                                    $759.00/ea
                                </div>
                            </div>
                        </li>
                    <li role="group" aria-label="product">
                            <div class="row m-0">
                                <div class="align-self-center ml-3">
                                    <div class="cart-item-img my-1">
                                            THUMBNAIL
                                        </div>
                                </div>
                                <div class="col-2 align-self-center text-center">
                                    1
                                </div>
                                <h2 class="col-11 h6 align-self-center font-weight-normal text-wrap m-0 pl-0">
                                    <a id="cart-item-313124" class="align-self-center text-reset pagearea">
                                        Paul Reed Extra Class Super Special Guitar That Spans Multiple Lines 3
                                    </a>
                                </h2>
                                <div class="col-6 align-self-center text-right">
                                    $679.00
                                </div>
                            </div>
                        </li>
                    </ul>
            </div>

    </body>

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

Angular 13: Problems arise with custom theme in Angular Material version 13

I've set up a custom theme palette for my project that works perfectly with version ^12.2.13 of Angular Material, but not with ^13.2.3. Here's the SCSS code for my custom theming: my-custom-theme.scss @import '~@angular/material/theming&apo ...

cssangularsassangular-materialangular13

The hover effect and image opacity adjustment seem to be malfunctioning in my HTML/CSS code

Currently, I am in the midst of a web project and my goal is to implement a hover effect on the first card containing an image. The desired outcome is for the card to move upwards upon hovering, allowing the image to become fully visible with an opacity se ...

javascripthtmlcsshovertailwind-css

Inject HTML code containing a function that triggers upon button press

I am facing a challenge in inserting code through a submit button. Essentially, I am looking for this button to trigger a PHP function that adds a block of HTML code. Below is the function: function addTrainee(){ print_r('<form method="post&qu ...

phphtml

MUI Grid - justify content to the right

I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...

cssflexboxmaterial-ui

Each page is restricted to containing only a single server-side Form tag

I inserted a page with HTML code into a master page and encountered this error when I tried to launch the page. I'm unsure of what I did wrong! <%@ Page Title="" Language="C#" MasterPageFile="~/YourGuruMaster.master" AutoEventWireup="true" Cod ...

asp.nethtmlmaster-pages

Combining Two DIVS Side by Side

Hey there, I am working on a timeline using two divs within a table cell. My goal is to have these divs overlap instead of appearing one below the other. The position attribute for all the DIVs inside the cell must remain unchanged due to the drag/drop fu ...

javascriptjqueryhtml

The CSS stylesheet appears to be properly linked, however, it is not displaying correctly on the preview page

Here are the locations of my folders: index.ejs can be found inside Markdown Blog/views/articles This is where my css stylesheet is located: ../../css/styles.css Despite ctrl+clicking the path and successfully navigating to the css file, the styles do no ...

htmlcss

Ways to use jQuery to disable row form elements in the second and third columns

I need a way to deactivate form elements in the second and third columns, starting from the second row until the nth row using a jQuery selector. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> ...

javascriptjqueryhtmlcss

Creating a triangle with SVG polygon: A step-by-step guide

I'm attempting to create a bottom triangle using SVG polygons, similar to the image below: https://i.stack.imgur.com/571FM.png Here is what I have tried so far: <svg xmlns="http://www.w3.org/2000/svg" height="150px" width="100%" viewBox="0 0 ...

htmlsvgpolygonclip-path

Displaying images dynamically in a gridview from a hard drive source

I am facing an issue trying to dynamically retrieve an image from my hard drive. Despite creating the dynamic path correctly, the image is not displaying. The root cause of this problem lies in the fact that I am developing a back-end system for a website ...

c#cssasp.netgridview

Having issues with Angular Material, specifically with mat-list-item and routerLinkActive not functioning as expected

Currently, I am working with a navigation view that utilizes the MatSidenavModule. The issue I am encountering is on mobile screens. When I click a mat-list-item, the mat-sidenav closes as expected. However, upon opening the mat-sidenav again, Material alw ...

javascriptcssangularangular-material

What is the best way to connect internal files within Angular?

I am encountering an issue when trying to connect my login page from the navbar. Here is the code snippet for the navbar that I have: <div class="navbar-container"> <ul id="slide-out" class="side-nav center-align"> <li> <d ...

htmlangularangular2-routingfilepathrouterlink

Tips for incorporating Jquery forms with PHP in multiple iterations of a while loop

I am attempting to run a while loop with jQuery form processing to prevent the page from refreshing. The current code seems to be working, however, the jQuery function is only applied to the first loop, with subsequent loops opening a new page instead. I ...

phpjavascriptjqueryhtml

Transmitting form data inputted by the user to a modal that resides in the same component, all without the need for child or parent components or

In need of a solution where users can input answers to questions and have all the entered data displayed in a popup alongside the respective question. If a user chooses not to answer a question, I do not want that question or any related information to be ...

htmlcssjsonangulartypescript

Adding a .PHP File to Two Separate DIVs

I am using wordpress to create a custom theme. I'm interested in placing all the content from my slider.php file inside a div box on my index.php page. How would I go about doing this? SLIDER.PHP <div class="slider"> // All the image tags wit ...

javascriptphpjqueryhtmlcss

Troubleshooting alignment issues with ReactJS Bootstrap on Internet Explorer - Application not displaying correctly on IE as it does in Chrome

After building a ReactJS app, I noticed that when accessing it in Internet Explorer, all the content gets squished in the middle of the page. It seems like IE is not properly rendering the Bootstrap components, even though Chrome, Firefox, and Edge display ...

reactjsinternet-explorerbootstrap-4alignmentreact-bootstrap

Creating a grid layout: Is there a way to instruct the renderer to disregard any additional tags in between

I have been setting up a grid layout with some divs, following this structure: CSS .grid { width: 300px; display: grid; grid-template-columns: 50% 50%; } HTML <div class="grid"> <div>First cell</div> <div>Second cell&l ...

htmlangularcssgrid-layout

Minimizing HTML code on the main page of WordPress is a crucial optimization technique

I implemented this code to compress the HTML output on my WordPress website. While it works perfectly on the main page and post pages, it's causing several issues in the admin section. function minify_html(){ ob_start('html_compress'); ...

phphtmlwordpressactionminify

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

javascripthtmlcss

Do we need to include href in the anchor tag?

Why am I unable to display the icon within the <anchor> element without using the href attribute? The icon only appears when I set the href attribute to "". Even if I manage to show the icon by adding href="", adjusting the size with width and height ...

javascriptjqueryhtmlcss