Skip to content

Instantly share code, notes, and snippets.

@afifix

afifix/index.html

Created August 1, 2019 10:15
Show Gist options
  • Save afifix/781227bdffeed210bfbed6e5c318007a to your computer and use it in GitHub Desktop.
Save afifix/781227bdffeed210bfbed6e5c318007a to your computer and use it in GitHub Desktop.
Download ZIP
cart badge bootstrap 4 cart badge bootstrap 4 // source https://jsbin.com/zeruyoq
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="description" content="cart badge bootstrap 4">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<title>cart badge bootstrap 4</title>
<style id="jsbin-css">
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
.btn .cart-badge {
left: -10px;
top: -10px;
color: white;
background-color: #8da6ce;
}
</style>
</head>
<body>
<div class="mt-5 flex-container">
<div class="container p-0">
<div class="d-flex justify-content-between align-items-center">
<from class="">
<div class="input-group input-group-sm border-bottom">
<input type="text" class="form-control border-0 no-outline font-italic" placeholder="Chercher">
<div class="input-group-append">
<button class="btn border-0 no-outline" type="button">
<icon class="fa fa-search" aria-hidden="true"></icon>
</button>
</div>
</div>
</from>
<div class="">
<h4>BRAND</h4>
</div>
<div class="">
<button class="btn border-0 no-outline" type="button">
<icon id="user-i" class="fa fa-user" aria-hidden="true"></icon>
</button>
<button class="btn border-0 no-outline" type="button">
<icon id="basket-i" class="fa fa-shopping-basket" aria-hidden="true"></icon>
<span class="badge rounded-circle cart-badge">4</span>
</button>
</div>
</div>
</div>
<hr />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script id="jsbin-source-css" type="text/css">@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
.btn .cart-badge {
left: -10px;
top: -10px;
color: white;
background-color: #8da6ce;
}
</script>
</body>
</html>
Raw
jsbin.zeruyoq.css
@import url("https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css");
.btn .cart-badge {
left: -10px;
top: -10px;
color: white;
background-color: #8da6ce;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment