<div class="container my-5">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-12">
<div class="card shopping-cart">
<div class="card-body p-4">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-6">
<h3 class="mb-4 py-2 text-center font-weight-bold text-uppercase">Your products</h3>
<div class="media mb-3">
<img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/13.jpg" alt="Generic placeholder image">
<div class="media-body">
<a class="float-right"><i class="fas fa-times"></i></a>
<h5 class="mt-0 font-weight-bold text-primary">iPhone Xs Max 64GB</h5>
<p class="font-weight-bold grey-text mb-2">Color: white</p>
<div class="d-flex justify-content-between">
<p class="font-weight-bold">999$</p>
<div class="def-number-input number-input safari_only mt-n05">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus"></button>
<input class="quantity font-weight-bold black-text" min="0" name="quantity" value="1" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div>
</div>
</div>
</div>
<div class="media mb-3">
<img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/6.jpg" alt="Generic placeholder image">
<div class="media-body">
<a class="float-right"><i class="fas fa-times"></i></a>
<h5 class="mt-0 font-weight-bold text-primary">Headphones Bose 35 II</h5>
<p class="font-weight-bold grey-text mb-2">Color: red</p>
<div class="d-flex justify-content-between">
<p class="font-weight-bold">230$</p>
<div class="def-number-input number-input safari_only mt-n05">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus"></button>
<input class="quantity font-weight-bold black-text" min="0" name="quantity" value="1" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div>
</div>
</div>
</div>
<div class="media">
<img class="d-flex mr-3" src="https://mdbootstrap.com/img/Photos/Horizontal/E-commerce/Products/1.jpg" alt="Generic placeholder image">
<div class="media-body">
<a class="float-right"><i class="fas fa-times"></i></a>
<h5 class="mt-0 font-weight-bold text-primary">iPad 9.7 6-gen WiFi 32GB</h5>
<p class="font-weight-bold grey-text mb-2">Color: rose pink</p>
<div class="d-flex justify-content-between">
<p class="font-weight-bold">655$</p>
<div class="def-number-input number-input safari_only mt-n05">
<button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="minus"></button>
<input class="quantity font-weight-bold black-text" min="0" name="quantity" value="2" type="number">
<button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
</div>
</div>
</div>
</div>
<hr class="blue-border mb-4">
<div class="d-flex justify-content-between px-2">
<p class="font-weight-bold">Discount:</p>
<p class="font-weight-bold">95$</p>
</div>
<div class="d-flex justify-content-between light-blue lighten-5 p-2">
<h5 class="font-weight-bold mb-0">Total:</h5>
<h5 class="font-weight-bold mb-0">1789$</h5>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-6">
<h3 class="mb-4 py-2 mt-lg-0 mt-4 text-center font-weight-bold text-uppercase">Payment</h3>
<form action="">
<!-- Medium input -->
<div class="md-form mb-5">
<input type="tel" id="inputMDEx4" class="form-control" autofocus value="1234 5678 9012 3456">
<label for="inputMDEx4">Card number</label>
</div>
<!-- Medium input -->
<div class="md-form">
<input type="text" id="inputMDEx3" class="form-control" autofocus value="John Smith">
<label for="inputMDEx3">Name on card</label>
</div>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mb-4">
<!-- Medium input -->
<div class="md-form">
<input type="text" id="inputMDEx2" class="form-control" autofocus value="04 / 23">
<label for="inputMDEx2">Valid thru</label>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 mb-4">
<!-- Medium input -->
<div class="md-form">
<input type="password" id="inputMDEx1" class="form-control" autofocus value="345">
<label for="inputMDEx1">CCV number</label>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<p class="mb-5">Lorem ipsum dolor sit amet consectetur, adipisicing elit <br><a class="blue-text">obcaecati sapiente</a></p>
<button type="button" class="btn btn-primary btn-block mb-lg-0 mb-5">Buy now</button>
<h5 class="font-weight-bold"><a class="blue-text back-link"><i class="fas fa-angle-left mr-2"></i>Back to shopping</a></h5>
</form>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
img {
width: 150px;
}
.number-input input[type="number"] {
-webkit-appearance: textfield;
-moz-appearance: textfield;
appearance: textfield;
}
.number-input input[type=number]::-webkit-inner-spin-button,
.number-input input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.number-input {
margin-bottom: 2rem;
}
.number-input button {
-webkit-appearance: none;
background-color: transparent;
border: none;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 0;
position: relative;
}
.number-input button:before,
.number-input button:after {
display: inline-block;
position: absolute;
content: '';
height: 2px;
transform: translate(-50%, -50%);
}
.number-input button.plus:after {
transform: translate(-50%, -50%) rotate(90deg);
}
.number-input input[type=number] {
text-align: center;
}
.number-input.number-input {
border: 1px solid #ced4da;
width: 10rem;
border-radius: .25rem;
}
.number-input.number-input button {
width: 2.6rem;
height: .7rem;
}
.number-input.number-input button.minus {
padding-left: 10px;
}
.number-input.number-input button:before,
.number-input.number-input button:after {
width: .7rem;
background-color: #495057;
}
.number-input.number-input input[type=number] {
max-width: 4rem;
padding: .5rem;
border: 1px solid #ced4da;
border-width: 0 1px;
font-size: 1rem;
height: 2rem;
color: #495057;
}
@media not all and (min-resolution:.001dpcm) {
@supports (-webkit-appearance: none) and (stroke-color:transparent) {
.number-input.def-number-input.safari_only button:before,
.number-input.def-number-input.safari_only button:after {
margin-top: -.3rem;
}
}
}
.blue-border {
border-top: 2px solid #4285f4;
}
.shopping-cart .def-number-input.number-input {
border: none; }
.shopping-cart .def-number-input.number-input input[type=number] {
max-width: 2rem;
border: none; }
.shopping-cart .def-number-input.number-input input[type=number].black-text, .shopping-cart .def-number-input.number-input input.btn.btn-link[type=number], .shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:hover,
.shopping-cart .def-number-input.number-input input.md-toast-close-button[type=number]:focus {
color: #212529 !important; }
.shopping-cart .def-number-input.number-input button {
width: 1rem; }
.shopping-cart .def-number-input.number-input button:before, .shopping-cart .def-number-input.number-input button:after {
width: .5rem; }
.shopping-cart .def-number-input.number-input button.minus:before, .shopping-cart .def-number-input.number-input button.minus:after {
background-color: #9e9e9e; }
.shopping-cart .def-number-input.number-input button.plus:before, .shopping-cart .def-number-input.number-input button.plus:after {
background-color: #4285f4; }
.shopping-cart .def-number-input.number-input.mt-n05 {
margin-top: -.33rem; }
.shopping-cart .back-link {
position: absolute;
bottom: 0; }