Bootstrap checkbox list
by Arsen
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Demo header-->
<section class="py-5 header text-center text-white">
<div class="container pt-4">
<header>
<h1 class="display-4">Bootstrap checkbox list</h1>
<p class="font-italic mb-1">Using Bootstrap 4 custom checkboxes, build an elegant food form.</p>
<p class="font-italic"> Snippet By
<a class="text- text-white" href="https://bootstrapious.com/">
<u>Bootstrapious</u>
</a>
</p>
</header>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-7 mx-auto">
<div class="card shadow border-0 mb-5">
<div class="card-body p-5">
<h2 class="h4 mb-1">Чеклист новенького</h2>
<p class="small text-muted font-italic mb-4"></p>
<ul class="list-group">
<li class="list-group-item rounded-0">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="customCheck1" type="checkbox">
<label class="cursor-pointer d-block custom-control-label" for="customCheck1">Получить ноут</label>
</div>
</li>
<li class="list-group-item">
<div class="custom-control custom-checkbox">
<input...
CSS
/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*
*/
.text-small {
font-size: 0.9rem !important;
}
body {
background: linear-gradient(to left, #56ab2f, #a8e063);
}
.cursor-pointer {
cursor: pointer;
}