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
"policies"
Bootstrap 3.3.0 Snippet by
jindalv
3.3.0
Preview
HTML
CSS
JS
View Full Screen
Fork
Fork this
1.5K
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="no-gutter row"> <div class="col-xs-12 col-sm-12 col-md-2 col-lg-2 col-xl-2 navPanel "> <div class="panel"> <div class="panel-heading"> <img src="https://secure.gravatar.com/avatar/de9b11d0f9c0569ba917393ed5e5b3ab?s=140&r=g&d=mm" class="img-responsive" alt="Cinque Terre"> </div> <div class=""> <ul class="nav nav-pills nav-stacked"> <li class="checkers"> <div class="row"> <div class="col-md-8 pills_col"> Local Procedures </div> <div class="checkbox col-md-4 pills_col"> <label style="font-size: 1em"> <input type="checkbox" value=""> <span class="cr"><i class="cr-icon fa fa-check"></i></span> </label> </div> </div> </li> <li class="checkers"> <div class="row"> <div class="col-md-8 pills_col"> Local Policies </div> <div class="checkbox col-md-4 pills_col"> <label style="font-size: 1em"> <input type="checkbox" value=""> <span class="cr"><i class="cr-icon fa fa-check"></i></span> </label> </div> </div> </li> <li class="checkers"> <div class="row"> <div class="col-md-8 pills_col"> Global Policies </div> <div class="checkbox col-md-4 pills_col"> <label style="font-size: 1em"> <input type="checkbox" value=""> <span class="cr"><i class="cr-icon fa fa-check"></i></span> </label> </div> </div> </li> </ul> <div class="row"> <div class="col-md-12 pills_col"> Filter By: </div> </div> </div> </div> </div> <div class="col-xs-12 col-sm-12 col-md-10 col-lg-10 col-xl-12"> <div class="row mysiteHeaders text-center"> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Blog</p> </div> <div class="boxIconText"> <i class="fa fa-rss fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Email</p> </div> <div class="boxIconText"> <i class="fa fa-envelope-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Invite</p> </div> <div class="boxIconText"> <i class="fa fa-calendar fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Notifications</p> </div> <div class="boxIconText"> <i class="fa fa-bell-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> <div class="col5 col-sm-6 boxes"> <div class="boxTitle"> <p class="text-center">My Tasks</p> </div> <div class="boxIconText"> <i class="fa fa-check-square-o fa-2x" aria-hidden="true"></i> <strong>4</strong> </div> </div> </div> </div> </div>
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) { /* For landscape layouts only */ .deviceOffset { margin-right: 100px; margin-left: 100px; } .deviceOffset .twoColumnsGrid { width: 50%; } } @media(min-width: 992px) { .col5 { width: 20%; float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; } } a.eachbox { font-weight: 300; display: inline-block; text-decoration: none !important; color: white !important; padding: 20px 30px; margin: 5px 0 0 6px; width: 100%; } a.eachbox .eachicon { line-height: 32px; font-size: 30px; display: inline-block; vertical-align: middle; border-right: 1px solid rgba(255, 255, 255, 0.25); padding-right: 15px; width : 50px; } a.eachbox .description { display: inline-block; vertical-align: middle; padding-left: 10px; width: 180px; height: 32px; } a.eachbox.twitter { -webkit-transition: background-color 0.25s ease-in-out; transition: background-color 0.25s ease-in-out; } /* only remove padding of middle columns */ .downarrow i { margin-top: 40px; } .collapseContainer a:hover, .collapseContainer a { color: #BA0100; text-decoration: none; } .boxTitle p { font: 14px sans-serif; padding-top: 10px; text-align: center; letter-spacing: 0.5px; } p.sectionHeading { position: relative; z-index: 1; text-align: center; margin-top: 15px; } .sectionInfo h5 { font-weight: 700; padding-top: 15px; } .list-style { list-style: inherit !important; padding-left: 20px; } p.sectionHeading:before { border-top: 2px solid #dfdfdf; content: ""; //margin: 0 auto; /* this centers the line to the full width specified */ position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ top: 50%; left: 0; right: 0; bottom: 0; width: 95%; z-index: -1; margin-left: 20px; } p.sectionHeading span { /* to hide the lines from behind the text, you have to set the background color the same as the container */ background: #fff; padding: 0 15px; font-size: 20px } .status { font-family: 'Source Sans Pro', sans-serif; } .navPanel .panel-body { background-color: #EDEDED; } .panel-body .nav a { font-size: 12px; color: #000; } .panel-body .nav-pills>li.active>a { background-color: #BA0100; ; } .navPanel { padding-left: 10px; padding-right: 0px; background-color: #EDEDED; } .navPanel .panel-heading img { width: 100%; } .navPanel .panel-heading { padding: 0px; } .boxIconText strong { font-size: 28px; font-weight: 300; } .navPanel li { border-bottom: 1px solid #fff; } .boxes { border-radius: 0px; background-color: #BA0100; color: #fff; font-weight: 300; border-right: 1px solid #fff; border-top: 1px solid #fff; padding-top:10px; } .checkbox label:after { content: ''; display: table; clear: both; } .checkbox .cr{ position: relative; display: inline-block; border: 1px solid #a9a9a9; border-radius: .25em; width: 1.3em; height: 1.3em; float: left; margin-right: .5em; } .checkbox .cr .cr-icon { position: absolute; font-size: .8em; line-height: 0; top: 50%; left: 20%; } .checkbox label input[type="checkbox"] { display: none; } .checkbox label input[type="checkbox"] + .cr > .cr-icon{ transform: scale(3) rotateZ(-20deg); opacity: 0; transition: all .3s ease-in; } .checkbox label input[type="checkbox"]:checked + .cr > .cr-icon { transform: scale(1) rotateZ(0deg); opacity: 1; } .checkbox label input[type="checkbox"]:disabled + .cr { opacity: .5; } .pills_col { margin-top:10px; margin-bottom:0px; padding-left:15px; } .checkers { background: #ff2020; padding-left:15px; } .active { background: #820000; color:#fff; font-size:14px; font-weight:bold; } .arr-bg { position: absolute; left: 279px; top: 0px; width: 0; height: 0; border-left: 25px solid #820000; border-bottom: 18px solid #fff; border-top: 18px solid #fff; }
$( document ).ready(function() { $("input[type=checkbox]").change(function() { if($(this).is(":checked")) { $(this).parents("li").addClass('active'); $(this).parents("li").append("<span class='arr-bg'></span>") } else { $(this).parents("li").removeClass('active'); $('.arr-bg').remove(); } }).change(); });
Related:
See More
Free Template
Now UI Dashboard
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76