I have to use an unordered list in my cart for Americans with Disabilities Act compliance, because tables do not have as many features as screen readers do.
So, in order to convert my HTML table to a list, I decided to use a container in each of the list items, and then create a container/row inside each item. The problem is that the CSS I had in place before is no longer working, and I can't get it to look exactly like it did beforehand.
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>I was under the impression that, if you create a bootstrap row, every child element has to be col of specified width. However, if the width of an element is the exact same every time, such as a thumbnail, then col can be excluded from it and only applied to the 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>