<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="row container d-flex justify-content-center">
<div class="card px-3 mt-5 w-100">
<div class="card-body">
<h4 class="card-title">Awesome Todo list</h4>
<div class="add-items d-flex">
<input
type="text"
class="form-control todo-list-input"
placeholder="What do you need to do today?"
#newTodo
/>
<button
class="add btn btn-primary font-weight-bold todo-list-add-btn"
>
Add
</button>
</div>
<div class="list-wrapper">
<ul class="d-flex flex-column-reverse todo-list">
<li class="completed">
<div class="form-check">
<label class="form-check-label">
<input class="checkbox" type="checkbox" checked="" />
my first app <i class="input-helper"></i
></label>
</div>
<i class="remove mdi mdi-close-circle-outline"></i>
</li>
<li class="">
<div class="form-check">
<label class="form-check-label">
