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
"Jahanzaib Task"
Bootstrap 4.1.1 Snippet by
RizwanAkram
4.1.1
Preview
HTML
CSS
View Full Screen
Fork
Fork this
1.5K
 
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 ----------> <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-5"> <a class="navbar-brand" href="#">Navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Something else here</a> </div> </li> <li class="nav-item"> <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <div class="container"> <div class="row"> <div class="col-12"> <h5>Agenda</h5><hr> <div class="session-box"> <div class="media align-items-center box"> <div class="media-object pr-4"> <p class="mb-0">03:00 am - 05:00 PM</p> <p class="mb-0">Tue - Apr 28, 2020</p> </div> <div class="media-body"> <h6 class="mt-0 mb-3"> Temporibus autem quibusdam et aut officiis debitis aut rerum ut et voluptates. </h6> <div class="media align-items-center sm-avatar"> <div class="media-object pr-3"> <img src="https://i.pinimg.com/originals/51/f6/fb/51f6fb256629fc755b8870c801092942.png" class="img-fluid rounded" alt=""> </div> <div class="media-body"> <h6 class="m-0">Your Name</h6> <p class="mb-0">Bio</p> </div> </div> </div> <div class="media-object pl-4 text-right"> <p class="text-muted text-uppercase">session</p> <a href="" class="btn btn-primary btn-sm">Watch</a><br> <a href="" class="btn btn-link btn-sm"><i class="far fa-star mr-1"></i>Add To Bag</a> <div class="dropdown"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="far fa-calendar mr-1"></i>Add to Calendar </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> <div class="media align-items-center box"> <div class="media-object pr-4"> <p class="mb-0">03:00 am - 05:00 PM</p> <p class="mb-0">Tue - Apr 28, 2020</p> </div> <div class="media-body"> <h6 class="mt-0 mb-3"> Temporibus autem quibusdam et aut officiis debitis aut rerum ut et voluptates. </h6> <div class="media align-items-center sm-avatar"> <div class="media-object pr-3"> <img src="https://i.pinimg.com/originals/51/f6/fb/51f6fb256629fc755b8870c801092942.png" class="img-fluid rounded" alt=""> </div> <div class="media-body"> <h6 class="m-0">Your Name</h6> <p class="mb-0">Bio</p> </div> </div> </div> <div class="media-object pl-4 text-right"> <p class="text-muted text-uppercase">session</p> <a href="" class="btn btn-danger btn-sm">Join</a><br> <a href="" class="btn btn-link btn-sm"><i class="far fa-star mr-1"></i>Add To Bag</a> <div class="dropdown"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="far fa-calendar mr-1"></i>Add to Calendar </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> <div class="media align-items-center box"> <div class="media-object pr-4"> <p class="mb-0">03:00 am - 05:00 PM</p> <p class="mb-0">Tue - Apr 28, 2020</p> </div> <div class="media-body"> <h6 class="mt-0 mb-3"> Temporibus autem quibusdam et aut officiis debitis aut rerum ut et voluptates. </h6> <div class="media align-items-center sm-avatar"> <div class="media-object pr-3"> <img src="https://i.pinimg.com/originals/51/f6/fb/51f6fb256629fc755b8870c801092942.png" class="img-fluid rounded" alt=""> </div> <div class="media-body"> <h6 class="m-0">Your Name</h6> <p class="mb-0">Bio</p> </div> </div> </div> <div class="media-object pl-4 text-right"> <p class="text-muted text-uppercase">session</p> <a href="" class="btn btn-danger btn-sm">Join</a><br> <a href="" class="btn btn-link btn-sm"><i class="far fa-star mr-1"></i>Add To Bag</a> <div class="dropdown"> <button class="btn btn-default btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="far fa-calendar mr-1"></i>Add to Calendar </button> <div class="dropdown-menu" aria-labelledby="dropdownMenuButton"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> </div> </div> </div> </div> </div> </div> </div> </div>
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css'); .navbar { border: 0; padding: 0 15px; } .navbar li { padding: .5rem 0; border-bottom: 2px solid #343a40; } .navbar li.active {border-color: #dc3545;} .session-box .box { font-size: 13px; padding: 20px; border: 2px solid #eee; border-bottom: 1px; } .session-box .box:last-child { margin-bottom: 20px; border-bottom: 2px; } .session-box .box:nth-child(odd) {background: #eee} .session-box .media-object p {color: #03A9F4;} .sm-avatar h6 {font-size: 12px;} .sm-avatar p {font-size: 11px;} .sm-avatar img { width: 40px; width: 40px; }
Related:
See More
Free Template
Paper Kit 2 Angular
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76