<div class="container">
<div class="row">
<div class="col-md-4">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4 mb-3">
<div class="card h-100">
<img src="https://upload.cc/i1/2020/12/24/6CAbc3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with </p>
</div>
<div class="card-footer text-center">
<div class="btn-group">
<a href="" class="btn btn-outline-primary">SM</a>
<a href="" class="btn btn-outline-primary disabled">M</a>
<a href="" class="btn btn-outline-primary">L</a>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card h-100">
<img src="https://upload.cc/i1/2021/01/14/g4aPUC.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with </p>
</div>
<div class="card-footer">
<a href="" class="btn btn-primary d-block">結帳去</a>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card h-100">
<img src="https://upload.cc/i1/2020/12/24/6CAbc3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<a href="" class="btn btn-primary d-block">結帳去</a>
</div>
</div>
</div>
<div class="col-md-4 mb-3">
<div class="card">
<img src="https://upload.cc/i1/2020/12/24/6CAbc3.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<a href="" class="btn btn-primary d-block">結帳去</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.btn_cart{
background: transparent;
position: relative;
border:1px solid transparent;
}
.btn_cart .badge{
position: absolute;
top:-1px;
right:-1px;
}
.dropdown-menu-end{
right:0;
left: auto;
}
.jumbotron_bg{
background-image: url("https://upload.cc/i1/2021/01/14/PMgNkr.jpg");
background-size:cover;
background-position: center center;
}
.header_bg{
background:rgba(255, 255, 255, 0.45);
}
