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
"Untitled"
Bootstrap 4.1.1 Snippet by
Gurdeep Osahan
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 ----------> <div class="container"> <div class="row"> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered modal-lg filter-options-pop" role="document"> <div class="modal-content"> <div class="modal-body p-0"> <div class="row m-0 filter-options-main"> <div class="col-4 p-0 filter-options-pop-left border-right"> <div class="filter-options-pop-left-header">Filter Options:</div> <ul class="filter-options-nav nav nav-tabs" role="tablist"> <li class="filter-options-nav-nav-item"> <a class="filternav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Degree of Classification</a> </li> <li class="filter-options-nav-nav-title mt-3">Primary Categories: 4</li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Process <span class="filternav-link-b">3</span></a> </li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Function <span class="filternav-link-b">3</span></a> </li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Business <span class="filternav-link-b">3</span></a> </li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Geography <span class="filternav-link-b">3</span> </a> </li> <li class="filter-options-nav-nav-title mt-4">Secondary Categories: 2</li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Executive Responsible <span class="filternav-link-b">3</span></a> </li> <li class="filter-options-nav-nav-item border-bottom"> <a class="filternav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Group Leader Gender <span class="filternav-link-b">3</span></a> </li> </ul> </div> <div class="col-8 p-0 filter-options-pop-right"> <div class="tab-content"> <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"> <div class="filter-options-pop-right-header">Degree of Classification</div> <div class="filter-options-pop-right-body"> <div class="filter-options-card"> <div class="filter-options-card-header" id="headingOne"> <a data-toggle="collapse" href="#collapseExampledd" role="button" aria-expanded="false" aria-controls="collapseExampledd"> Groups </a> </div> <div class="collapse show" id="collapseExampledd"> <div class="filter-options-card-body dc-groups"> <div class="custom-control custom-radio"> <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio1">All groups</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio2">Not fully classified groups only</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input"> <label class="custom-control-label" for="customRadio3">Fully classified groups only</label> </div> </div> </div> </div> </div> </div> <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="filter-options-pop-right-header">Geography:</div> <div class="filter-options-pop-right-body"> <div class="filter-options-card geography-tabb"> <div class="filter-options-card-header" id="headingOne"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">United States of America [3] </label> </div> <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"></a> </div> <div class="collapse show" id="collapseExample"> <div class="filter-options-card-body"> <div class="row"> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaa" checked> <label class="custom-control-label" for="aaa">New York</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaac" checked> <label class="custom-control-label" for="aaac">Atlanta</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaad" checked> <label class="custom-control-label" for="aaad">Chicago</label> </div> </div> </div> </div> </div> </div> <div class="filter-options-card geography-tabb"> <div class="filter-options-card-header" id="headingOne"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">Canada [10] </label> </div> <a data-toggle="collapse" href="#sss" class="collapsed" role="button" aria-expanded="false" aria-controls="sss"></a> </div> <div class="collapse" id="sss"> <div class="filter-options-card-body"> <div class="row"> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaa" checked> <label class="custom-control-label" for="aaa">New York</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaac" checked> <label class="custom-control-label" for="aaac">Atlanta</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaad" checked> <label class="custom-control-label" for="aaad">Chicago</label> </div> </div> </div> </div> </div> </div> <div class="filter-options-card geography-tabb"> <div class="filter-options-card-header" id="headingOne"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">Europe [5] </label> </div> <a data-toggle="collapse" href="#ss" class="collapsed" role="button" aria-expanded="false" aria-controls="ss"></a> </div> <div class="collapse" id="ss"> <div class="filter-options-card-body"> <div class="row"> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaa" checked> <label class="custom-control-label" for="aaa">New York</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaac" checked> <label class="custom-control-label" for="aaac">Atlanta</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaad" checked> <label class="custom-control-label" for="aaad">Chicago</label> </div> </div> </div> </div> </div> </div> <div class="filter-options-card geography-tabb"> <div class="filter-options-card-header"> <div class="custom-control custom-checkbox mr-sm-2"> <input type="checkbox" class="custom-control-input" id="customControlAutosizing"> <label class="custom-control-label" for="customControlAutosizing">India [5] </label> </div> <a data-toggle="collapse" href="#collapseExamples" class="collapsed" role="button" aria-expanded="false" aria-controls="collapseExamples"></a> </div> <div class="collapse" id="collapseExamples"> <div class="filter-options-card-body"> <div class="row"> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaa" checked> <label class="custom-control-label" for="aaa">New York</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaac" checked> <label class="custom-control-label" for="aaac">Atlanta</label> </div> </div> <div class="col px-1"> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input" id="aaad" checked> <label class="custom-control-label" for="aaad">Chicago</label> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-primary" data-dismiss="modal">Clear all</button> <button type="button" class="btn btn-primary">Apply</button> </div> </div> </div> </div> </div> </div>
.filter-options-pop .modal-content { border-radius: 8px; box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16); border: none; background-color: #fff; overflow: hidden; } .filter-options-pop .modal-footer .btn{ width: 86px; height: 29px; border-radius: 6px; font-size: 14px; font-weight: normal; padding: 0px; } .filter-options-pop .modal-footer .btn-primary{ background-color: #0baec8 !important; border-color: #0baec8 !important; } .filter-options-pop .modal-footer .btn-outline-primary{ color: #0baec8 !important; border-color: #0baec8 !important; } .filter-options-pop .modal-footer .btn-outline-primary:hover, .filter-options-pop .modal-footer .btn-outline-primary:focus{ color: #ffffff !important; border-color: #0baec8 !important; background-color: #0baec8 !important; } .filter-options-nav{ border: none; } .filter-options-pop-left{ min-height: 407px; } .filter-options-pop-right-header { padding: 8.5px 15.5px 8.5px 15.5px; background-color: #f6f6f6; font-size: 12px; font-weight: bold; color: #706e7b; } .filter-options-pop-right-body { padding: 9.5px 14px 9.5px 9.5px; } .filter-options-card-header { display: flex; align-items: center; } .filter-options-card{ padding: 13.5px 12px 13.5px 12px; border-radius: 4px; background-color: #f6f6f6; margin-bottom: 9.5px; } .filter-options-card-header a { font-size: 12px; font-weight: normal; letter-spacing: 0.26px; color: #000; width: 100%; text-decoration: none !important; } .filter-options-pop-left-header { border-bottom: 1px solid #4daeca; font-size: 12px; color: #706e7b; padding: 8.5px 15.5px 8.5px 20.5px; font-weight: bold; margin-bottom: 9.5px; } .filter-options-nav li { width: 100%; padding: 1px; } .filternav-link{ font-size: 12px; font-weight: normal; letter-spacing: 0.26px; text-align: left; color: #706e7b !important; padding: 7px 12px; border-radius: 4px; border: solid 1px #ffffff; background-color: #ffffff; width: 100%; display: flex; align-items: center; text-decoration: none !important; } .filternav-link.active .filternav-link-b{ display: block; } .filternav-link-b { width: 15px; height: 15px; background: #55cded; border: 1px solid #589ab2; color: #f6f6f6; font-size: 9px; display: flex; align-items: center; justify-content: center; border-radius: 50px; margin-left: auto; text-align: center; display: none; } .filternav-link:hover, .filternav-link.active{ color: #706e7b !important; border: solid 1px #899497; background-color: #dffafe; } .filter-options-nav-nav-title { margin-left: 8px; margin-bottom: 5px; margin-right: 8px; font-size: 10px; font-weight: bold; letter-spacing: 0.2px; text-align: left; color: #706e7b; width: 100%; } .filter-options-pop .border-bottom { border-bottom: 1px solid #f9f9f9!important; } .filter-options-card-body { padding-top: 13px; } .dc-groups label { color: #706e7b; font-size: 12px; line-height: 24px; } .dc-groups .custom-control-input:checked~.custom-control-label::before { color: #fff; border-color: #00b0cd; background-color: #00b0cd; } .dc-groups .custom-control-label::before { background-color: #f6f6f6; border: #707070 solid 1px; } .geography-tabb .custom-control-label { font-size: 12px; font-weight: normal; letter-spacing: 0.26px; color: #000; width: 100%; text-decoration: none !important; white-space: nowrap; } .geography-tabb .custom-control-label::before { top: 0rem; left: -1.5rem; width: 16px; height: 16px; background-color: transparent; border: #706e7a solid 1px; } .geography-tabb .custom-checkbox .custom-control-label::before { border-radius: 3px; } .geography-tabb .custom-control-label::after { top: 0rem; left: -1.5rem; width: 16px; height: 16px; } .geography-tabb .custom-control { min-height: auto; line-height: 17px; } .geography-tabb .custom-control-input:checked~.custom-control-label::before { color: #fff; border-color: #00b0cd; background-color: #00b0cd; } .geography-tabb .filter-options-card-body .custom-checkbox { border: solid 0.3px rgb(0 176 205 / 30%); height: 33px; background: #fff; border-radius: 4px; padding: 7px 7px 7px 31px; } .geography-tabb .filter-options-card-body .custom-control-label { color: #00b0cd; } .geography-tabb .filter-options-card-body .row { margin: 0 0 0 18px; } .filter-options-card-header a:before { font-family: 'fontawesome'; content: "\f077"; float: right; transition: all 0.5s; color: #9e9e9e; } .filter-options-card-header a.collapsed:before { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); }
Related:
See More
Free Template
Black Dashboard React
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76