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
"meeting invitation module"
Bootstrap 4.1.1 Snippet by
ap123
4.1.1
Preview
HTML
View Full Screen
Fork
Fork this
593
 
0 Fav
Post to Facebook
Tweet this
<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> <!------ Include the above in your HEAD tag ----------> <body> <header> <div class="container bg-info p-5 "> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link active" href="index.html">Home <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Features</a> </div> </div> </nav> </div> </header> <!----> <main> <div class="container my-5"> <div class="card-body text-center"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> <div class="card"> <button id="add__new__list type="button" class="btn btn-success position-absolute" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="fas fa-plus"></i> Add a new List</button> <table class="table table-hover"> <thead> <tr> <th scope="col">ID</th> <th scope="col">List Name</th> <th scope="col">Deadline</th> <th scope="col">Edit List </th> <th scope="col">list info</th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td> <a class="btn btn-sm btn-primary" href="#"><i class="far fa-edit"></i> edit</a> <a class="btn btn-sm btn-danger" href="#"><i class="fas fa-trash-alt"></i> delete</a> </td> <td><a class="btn btn-sm btn-info" href="#"><i class="fas fa-info-circle"></i> Details</a> </td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td> <a class="btn btn-sm btn-primary" href="#"><i class="far fa-edit"></i> edit</a> <a class="btn btn-sm btn-danger" href="#"><i class="fas fa-trash-alt"></i> delete</a> </td> <td><a class="btn btn-sm btn-info" href="#"><i class="fas fa-info-circle"></i> Details</a> </td> </tr> <tr> <th scope="row">3</th> <td colspan="2">Larry the Bird</td> <td> <a class="btn btn-sm btn-primary" href="#"><i class="far fa-edit"></i> edit</a> <a class="btn btn-sm btn-danger" href="#"><i class="fas fa-trash-alt"></i> delete</a> </td> <td><a class="btn btn-sm btn-info" href="#"><i class="fas fa-info-circle"></i> Details</a> </td> </tr> </tbody> </table> </div> <!-- Large modal --> <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="card-body text-center"> <h4 class="card-title">Special title treatment</h4> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p> </div> <div class=" card col-8 offset-2 my-2 p-3"> <form> <div class="form-group"> <label for="listname">List name</label> <input type="text" class="form-control" name="listname" id="listname" placeholder="Enter your listname"> </div> <div class="form-group"> <label for="datepicker">Deadline</label> <input type="text" class="form-control" name="datepicker" id="datepicker" placeholder="Pick up a date"> </div> <div class="form-group"> <label for="datepicker">Add a list item</label> <div class="input-group"> <input type="text" class="form-control" placeholder="Add an item" aria-label="Search for..."> <span class="input-group-btn"> <button class="btn btn-secondary" type="button">Go!</button> </span> </div> </div> <div class="form-group text-center"> <button type="submit" class="btn btn-block btn-primary">Sign in</button> </div> </form> </div> </div> </div> </div> </div> </main> <!----> <!----> <footer > <div class="container bg-info p-5"> </div> </footer> </body>
Related:
See More
Template
Vue Paper Dashboard 2 PRO
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76