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
"Basic tests"
Bootstrap 3.0.0 Snippet by
victorgaldamezstarshot
3.0.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
1.3K
 
1 Fav
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 ----------> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.css"/> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="example"> <p>Dropdown example</p> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">JavaScript</a></li> </ul> </div> </div> <div class="example"> <p>Select plugin example</p> <select class="col-md-2 selectpicker" style="margin:15px"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option class="red" value="5">May</option> <option style="background-color:green" value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9" selected>September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> </div> <div class="example"> <p>Bottom aligned divs</p> <div class="container-test"> <div class="content">one</div> <div class="content">two</div> </div> </div> </div> </div> </div> <div class="row hidden"> <nav id="mainNav" class="navbar navbar-default navbar-fixed-top navbar-custom affix-top"> <div class="container"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i> </button> <!-- Brand image or brand name --> <!-- <img class="navbar-brand" src="#"/> --> <a class="navbar-brand" href="#page-top">Brand name</a> </div> <!-- Menu options --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <li class="hidden active"> <a href="#page-top"></a> </li> <li class="page-scroll"> <a href="#">Option 1</a> </li> <li class="page-scroll"> <a href="#">Option 2</a> </li> <li class="page-scroll"> <a href="#">Option 3</a> </li> </ul> </div> <div class="row"> <div class="col-xs-12"> <!-- Account selection for mobile - I --> <div class="dropdown"> <button id="actionsDrop" class="btn btn-default dropdown-toggle col-xs-12" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> HSA - $587.50 <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="actionsDrop"> <li class="selected"><a href="#">HSA - $587.50</a></li> <li><a href="#">FSA - $120.00</a></li> <li><a href="#">HSAOD - $350.00</a></li> <li><a href="#">DCAP - $2300,00</a></li> </ul> </div> <!-- Account selection for mobile - F --> </div> </div> </div> </nav> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.js"></script> </body> </html>
.red { background-color: red; } /* Dropdowns .dropdown .dropdown-toggle .down-arrow { display: inline-block; margin-top: 6px; margin-left:5px; width: 16px; height: 9px; background-image: url("http://www.htic.es/assets/down-arrow.png") } .dropdown .dropdown-toggle .caret { display: none; } .dropdown.open .down-arrow { behavior:url(-ms-transform.htc); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); transform: rotate(-180deg); } .dropdown button, .dropdown-menu { background-color: #f6f8f8; } .dropdown-menu { margin-top: 0px; background-color: #f6f8f8; border-radius: 0 0 0 0; } .dropdown-menu > li > a:hover { background-color: #96a4ad; } /* Dropdowns - F */ .container .example { box-sizing: border-box; margin-top: 15px; overflow:visible; clear:both; padding: 15px; } .container .example p { font-weight:bold; width:100%; } .container-test { display:flex; align-items:flex-end; background-color: #A9E2F3; text-align:center; height: 100px; } .container-test .content { background-color: #00BFFF; width:100%; } /* Dropdowns - I */ .bootstrap-select { padding: 0; } .bootstrap-select .dropdown-toggle span.caret, .dropdown .dropdown-toggle span.caret { display: inline-block; border:none; width: 16px; height: 9px; background-image: url("http://www.htic.es/assets/down-arrow.png"); content: ""; } .bootstrap-select .dropdown.open span.caret, .dropdown.open span.caret { behavior:url(-ms-transform.htc); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -o-transform: rotate(-180deg); -ms-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); transform: rotate(-180deg); } .dropdown button, .dropdown-menu { background-color: #ffffff; } .dropdown-menu { margin-top: 0px; background-color:#f6f8f8; border-radius: 0 0 0 0; } .dropdown-menu > li > a:hover { background-color: #96a4ad; } /* Dropdowns - F */
Related:
See More
Free Template
Gaia Bootstrap Template
114.0K
114
Basic Register Page
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76