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 list items"
Bootstrap 4.1.1 Snippet by
muhittinbudak
4.1.1
Preview
HTML
View Full Screen
Fork
Fork this
1.1K
 
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 ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container-fluid"> <div class="navbar-header"> <div class="navbar-brand pull-right" style="margin:10px 10px 0;padding: 0;"> <button class="btn btn-danger pull-right">Ekle <i class="fa fa-plus fa-sm" aria-hidden="true"></i></button> </div> </div> </div> </nav> <div class="container-fluid" style="margin:0px 15px 0px 15px"> <!--row1 başlangıç --> <br /> <div class="row"> <!-- Container, Row, and Column used for illustration purposes --> <!-- <div class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2"> --> <!-- Fluid width widget --> <div class="panel panel-danger" style="font-family: 'Oswald', sans-serif;"> <div class="panel-heading"> <h3 class="panel-title"> <i class="fa fa-calendar fa-lg" aria-hidden="true"></i> Bekleyen işler </h3> </div> <div class="panel-body" style="padding:4px"> <ul class="media-list"> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;margin:0 0 15px 0;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;margin:0 0 15px 0;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;margin:0 0 15px 0;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;margin:0 0 15px 0;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;margin:0 0 15px 0;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> <!-- unsur başlangıç style="height: 108px;" --> <li class="media" style="border-bottom: 1px solid #8B0000;"> <div class="media-left" style="height:auto;"> <div class="panel panel-primary text-center date" style="padding: 4px;background-color:darkred;color:white;width: 45px"> <h6 style="margin:0 0 5 0;padding: 0">2023</h6> <h1 style="margin:0;padding: 0">31</h1> <p class="h5">Ağu</p> </div> </div> <div class="media-body" style="height:auto"> <h4 class="media-heading bg-warning" > <strong>1 Y 12 A 31 G 13 S </strong> </h4> <p class="h4"> 88:88:88 Türkçe çankırı Iğdırçanakkale ğmekimas lkamea memkaem kam</p> </div> <div class="media-right"> <div class="panel panel-default text-center date" style="width: 59px"> <button class="btn btn-danger btn-lg"><i class="fa fa-trash fa-lg" aria-hidden="true"></i></button><br/><br/> <button class="btn btn-primary btn-lg"><i class="fa fa-edit fa-lg" aria-hidden="true"></i></button> </div> </div> </li> <!-- bitiş --> </ul> <a href="#" class="btn btn-default btn-block">More Events »</a> </div> </div> <!-- End fluid width widget --> </div><!-- penel row bitiş --> </div><!-- container bitiş -->
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76