Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"todo"
Bootstrap 3.0.0 Snippet by
evarevirus
3.0.0
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
4.1K
 
0 Fav
Post to Facebook
Tweet this
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 id="newEventHolder"> <span><i class="fa fa-plus"></i> Add New Event</span> </div> <div id="newEventForm"> <label for="event-date">Event Date</label> <input type="text" id="eventDate"> <label for="event-title">Event Title</label> <input type="text" name="event-title" id="eventTitleInput" maxlength="80"/> <label for="event-description">Description</label> <textarea name="event-descripton" id="eventDescriptionInput">Event Description</textarea> <button name="add-event" id="addEvent">Add New Event</button> <button name="cancel-add-event" id="cancelAddEvent">Cancel</button> </div> <ul id="upcomingEvents"> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Akron Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> </li> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Cleveland Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> </li> <li id="eventHolder"> <div class="event-date-holder"> <span id="dateNumber">23</span> <span id="dateDay">Jan</span> </div> <div class="event-details-holder"> <h1>Columbus Flea</h1> <span id="eventDescription">Lorem ipsum dolar sit amet…</span> <ul id="editTools"> <li><i class="fa fa-pencil-square-o"></i></li> <li><i class="fa fa-bars"></i></li> <li><i class="fa fa-times" id="removeEvent"></i></li> </ul> </div> <li> </ul> <script> var newEventHolder = document.getElementById("newEventHolder"); var eventForm = document.getElementById("newEventForm"); var eventDate = document.getElementById("eventDate"); var addEvent = document.getElementById("addEvent"); var cancel = document.getElementById("cancelAddEvent"); var upcomingEvents = document.getElementById("upcomingEvents"); var eventHolder = document.getElementById("eventHolder"); var removeEvent = document.getElementById("removeEvent"); // Show New Event form $(newEventHolder).click(function() { $(eventForm).slideDown(400); }); // Add Datepicker to Date input $(eventDate).datepicker(); // Close New Event form $(cancel).click(function() { $(eventForm).slideUp(400); }); // Delete icon removed event from list $(removeEvent).click(function() { $(eventHolder).addClass('hide').stop(); }); </script> </div>
.container { margin: 50px auto; width: 640px; font-family: 'Source Sans Pro', sans-serif; font-weight: 400; } #newEventHolder { margin-bottom: 10px; width: 100%; height: 100px; border: 3px dashed #85b9e4; text-align: center; line-height: 4; font-size: 24px; color: #85b9e4; box-sizing: border-box; border-radius: 3px; } #newEventHolder:hover { border: 3px dashed #3289d2; color: #3289d2; cursor: pointer; } #newEventForm { width: 100%; padding: 15px; box-sizing: border-box; display: none; } #newEventForm label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 16px; color: #244674; } #newEventForm input[type="text"] { padding-left: 15px; margin-bottom: 20px; height: 50px; width: 100%; line-height: 1.875; font-size: 16px; color: #A7C1D9; border: 2px solid #C4DDF2; outline: 0; box-sizing: border-box; background: #f6fafd; } #newEventForm input[type="text"]:focus { background: #FFF; border: 2px solid #9ac5e9; } #newEventForm textarea { margin-bottom: 20px; padding: 5px; height: 120px; width: 100%; line-height: 1.875; font-size: 16px; color: #A7C1D9; border: 2px solid #C4DDF2; outline: 0; box-sizing: border-box; border-radius: 3px; background: #f6fafd; } #newEventForm textarea:focus { background: #FFF; border: 2px solid #9ac5e9; } #newEventForm button { margin-right: 10px; padding: 0 15px; background: #849EBF; color: #eef5fb; font-size: 16px; font-weight: 400; border: 0; outline: 0; line-height: 3.5; border-radius: 3px; cursor: pointer; } #newEventForm button:hover { background: #6284ae; } #newEventForm button#cancelAddEvent { background: #d9e9f7; color: #4c6a91; cursor: pointer; } #newEventForm button#cancelAddEvent:hover { background: #C4DDF2; } #eventHolder { padding: 17px 15px; margin-bottom: 10px; background: #C4DDF2; width: 100%; height: 100px; box-sizing: border-box; border-radius: 3px; } #eventHolder::after { content: ""; display: table; clear: both; } #eventHolder .event-date-holder { float: left; background: #A7C1D9; margin-right: 20px; padding: 10px; width: 50px; text-align: center; border-radius: 4px; box-shadow: 0px 1px 0px 0px #d9e9f7; } #eventHolder .event-date-holder #dateNumber { display: block; font-size: 30px; font-weight: 700; color: #0C1726; } #eventHolder .event-date-holder #dateDay { text-transform: uppercase; } #eventHolder .event-details-holder { float: left; width: 520px; line-height: 3.2; } #eventHolder .event-details-holder::after { content: ""; display: table; clear: both; } #eventHolder .event-details-holder h1 { float: left; margin-right: 30px; vertical-align: bottom; font-size: 20px; font-weight: 600; color: #244674; } #eventHolder .event-details-holder span#eventDescription { position: relative; padding-top: 4px; color: #0f2b42; float: left; font-size: 18px; } #eventHolder .event-details-holder span#eventDescription::before { content: "//"; position: absolute; left: -20px; color: #2a7cc0; } #eventHolder .event-details-holder ul#editTools { float: right; margin: 0px 0px 0px 10px; padding: 0px; } #eventHolder .event-details-holder ul#editTools li { display: inline; margin-right: 15px; padding-top: 5px; font-size: 20px; color: #5ca1db; } #eventHolder .event-details-holder ul#editTools li .fa { text-decoration: 0px 1px 0px 0px #d9e9f7; } #eventHolder .event-details-holder ul#editTools li .fa:hover { color: #3289d2; cursor: pointer; } #eventHolder .event-details-holder ul#editTools li:last-child { margin-right: 0; } .hide { display: none; }
<script>
Related:
See More
Free Template
Light Bootstrap Dashboard Angular
129.6K
101
Todo Example
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76