<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<h2>To Do List</h2>
<form name="checkListForm">
<input type="text" name="checkListItem" placeholder="List Item..."/>
</form>
<button type="button" id="add" class="btn btn-info">Add</button>
<button type="button" id="clear" class="btn btn-default">clear</button>
<br/><br/>
<div class="list"></div>
</div>
<div class="col-md-4"></div>
</div>
<hr>
<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fbootsnipp.com%2Fiframe%2F3koRB" target="_blank">
<small>HTML</small><sup>5</sup></a>
</div>
<!--
Comments:
- Consider submitting to CodeAcademy - the simpler one,non-Bootstrap
- add at least a few // comments to JS, to help people understand it
See the FORK of your snippet at:
http://bootsnipp.com/user/mrmccormack/3koRB
1- your 3rd col-md-4 was not closed, I fixed
2- I used Sublimetext's HTML Beautify plugin to format a bit nicer
3- Consider changing the cursor when mouse over an item, to indicate user can click on it
4- The "clear" button is great, but maybe indicate that it will only clear crossed out items?
(this could be a title="" maybe)
5- Consider placeholder="Add ToDo..." rather than placeholder="List Item..."
6- Change the link for HTML validation to yours (mine ends with 3koRB)
Thanks for making such a good effort in IM 215.
GOOD LUCK SIR !
-->