"todo list items"
Bootstrap 4.1.1 Snippet by muhittinbudak

<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ş -->

Related: See More


Questions / Comments: