"Category Lists"
Bootstrap 3.0.0 Snippet by xrozix

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 ----------> <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4"> <!-- Category --> <div class="single category"> <h3 class="side-title">Category</h3> <ul class="list-unstyled"> <li><a href="" title="">Business <span class="pull-right">13</span></a></li> <li><a href="" title="">Technology <span class="pull-right">13</span></a></li> <li><a href="" title="">Web <span class="pull-right">13</span></a></li> <li><a href="" title="">Ecommerce <span class="pull-right">13</span></a></li> <li><a href="" title="">Wordpress <span class="pull-right">13</span></a></li> <li><a href="" title="">Android <span class="pull-right">13</span></a></li> <li><a href="" title="">IOS <span class="pull-right">13</span></a></li> <li><a href="" title="">Windows <span class="pull-right">13</span></a></li> </ul> </div> </div> </div> </div> </body> </html>
.single { padding: 30px 15px; margin-top: 40px; background: #fcfcfc; border: 1px solid #f0f0f0; } .single h3.side-title { margin: 0; margin-bottom: 10px; padding: 0; font-size: 20px; color: #333; text-transform: uppercase; } .single h3.side-title:after { content: ''; width: 60px; height: 1px; background: #ff173c; display: block; margin-top: 6px; } .single ul { margin-bottom: 0; } .single li a { color: #666; font-size: 14px; text-transform: uppercase; border-bottom: 1px solid #f0f0f0; line-height: 40px; display: block; text-decoration: none; } .single li a:hover { color: #ff173c; } .single li:last-child a { border-bottom: 0; }

Related: See More

Vue Argon Design System
Search Result #lists with #sidebar #map and #card designs #bootstrap4
Portfolio Gallery with filtering category
Admin Lists Panel

Questions / Comments: