"Search Panel Dropdown"
Bootstrap 3.3.0 Snippet by jeanhenriqq

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 ----------> <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Vango - Home</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--bootstrap--> <link rel="stylesheet" href="css/bootstrap.min.css" crossorigin="anonymous"> <script src="//use.edgefonts.net/sail:n4:all.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/animate.css"> <!-- FAVICON --> <link rel="shortcut icon" href="/ico.ico" type="image/x-icon" > </head> <body class="body-content"> <nav class="navbar navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">VanGo</a> </div> <div id="navbar" class="collapse navbar-collapse"> <ul class="nav navbar-nav pull-left"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Sobre</a></li> <li><a href="#contact">Contact</a></li> </ul> <ul class="nav navbar-nav pull-right"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Cadastro</a></li> <li><a href="#contact">Entrar</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container text-center"> <div class="col-md-8 col-md-offset-2 get"> <div class="row"> <h1 class="intro-title animated fadeInDown">Busque seu transporte</h1> <p class="sub animated fadeInUp">Encontre a melhor opção para sua necessidade</p> </div> </div> <div id="custom-search-input"> <div class="row"> <div class="input-group col-md-8 col-md-offset-2"> <input type="text" class="search-query form-control" placeholder="Pesquise aqui!" /> <span class="input-group-btn"> <button class="btn btn-success" type="button"> <span class=" glyphicon glyphicon-search"></span> </button> </span> </div> </div> <div class="container"> <div class="row"> <button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#filter-panel"> <span class="glyphicon glyphicon-cog"></span> Busca avançada </button> <div id="filter-panel" class="collapse filter-panel"> <div class="panel panel-default"> <div class="panel-body"> <form class="form-inline" role="form"> <div class="form-group"> <label class="filter-col" for="pref-perpage">Result. por pág:</label> <select id="pref-perpage" class="form-control"> <option selected="selected" value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <!-- form group [rows] --> <div class="form-group"> <label class="filter-col" style="margin-right:0;" for="pref-cidade">Cidade:</label> <input type="text" class="form-control input-sm" id="pref-cidade"> </div><!-- form group [Cidade:] --> <div class="form-group"> <label class="filter-col" style="margin-right:0;" for="pref-orderby">Instituição:</label> <select id="pref-orderby" class="form-control"> <option>Faculdade X</option> <option>Faculdade Y</option> <option>Escola Z</option> </select> </div> <!-- form group [Faculdade:] --> <div class="form-group"> <label class="filter-col" style="margin-right:0;" for="pref-perpage">Capacidade:</label> <select id="pref-perpage" class="form-control"> <option selected="selected" value="10">10</option> <option value="15">15</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> <option value="50">50</option> <option value="60">60</option> </select> </div> <!-- form group [rows] --> <div class="form-group"> <button type="submit" class="btn btn-default filter-col"> <span class="glyphicon glyphicon-find"></span> Pesquisar </button> </div> </form> </div> </div> </div> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <p>©VanGo - 2016</p> </div> </footer> <!-- Latest compiled and minified JavaScript --> <script src="js/bootstrap.js" type="text/javascript" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-1.11.1.min.js" integrity="sha256-VAvG3sHdS5LqTT+5A/aeq/bZGa/Uj04xKxY8KM/w9EE=" crossorigin="anonymous"></script> </body> </html>
html { position: relative; min-height: 100%; } body{ margin-bottom: 30px; } .body-content { background-image: url(../img/background.png); background-repeat: no-repeat; background-position: center; background-size: cover; /*background: #0D7BB5;*/ } #custom-search-input { margin:0; margin-top: 27%; padding: 6px; } #custom-search-input .search-query { padding-right: 3px; padding-right: 4px \9; padding-left: 3px; padding-left: 4px \9; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 0px; height: 50px; text-align: center; font-size: 2em; color: #0A3A7F; } #custom-search-input button { border: 0; background: none; /** belows styles are working good */ padding: 2px 5px; margin-top: 2px; position: relative; left: -28px; /* IE7-8 doesn't have border-radius, so don't indent the padding */ margin-bottom: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 0px; color:#0A3A7F; } .search-query:focus + button { z-index: 3; } .button { border-radius: 0px; background: #0A3A7F; color: white; margin-right: 0px; padding-top: 5px; border: 5px 5px 5px 5px; } .intro h1, .intro-title { color: #000; font-family: Roboto,Helvetica,Arial,sans-serif; font-size: 2.5em; line-height: 40px; font-weight: bold; letter-spacing: -0.3px; margin-bottom: 10px; padding-bottom: 0; text-shadow: 1px 1px 0 rgba(0,0,0,0.2); text-transform: uppercase; transition: font 400ms cubic-bezier(0.25,0.1,0.25,1) 0s; } h2 a{ text-decoration: none; color: black; } h2 a:hover{ text-decoration: none; color: black; cursor: cell; } .intro p { color: #e8eced; font-size: 18px; font-weight: 300; text-shadow: 0 1px 1px rgba(0,0,0,0.2); } p{ display: block; margin: 0 0 10px; -webkit-margin-before: 1em; -webkit-margin-after: 1em; -webkit-margin-start: 0px; -webkit-margin-end: 0px; } p a{ color: white; font-size: 1.3em; } .get { margin-top: 15%; } .sub { font-size: 1em; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 40px; background-color: #f5f5f5; } .logo { font-family: sail, fantasy; } /*Busca avançada*/ .dropdown.dropdown-lg .dropdown-menu { margin-top: -1px; padding: 6px 20px; } .input-group-btn .btn-group { display: flex !important; } .btn-group .btn { border-radius: 0; margin-left: -1px; } .btn-group .btn:last-child { border-top-right-radius: 4px; border-bottom-right-radius: 4px; } .btn-group .form-horizontal .btn[type="submit"] { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } .form-horizontal .form-group { margin-left: 0; margin-right: 0; } .form-group .form-control:last-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; } @media screen and (min-width: 768px) { #adv-search { width: 500px; margin: 0 auto; } .dropdown.dropdown-lg { position: static !important; } .dropdown.dropdown-lg .dropdown-menu { min-width: 500px; } }

Related: See More

Now UI Dashboard
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: