"Google search with search options "
Bootstrap 4.0.0 Snippet by vivektri

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>google-search</title> <link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet prefetch" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> </head> <body> <div class="fluid-container"> <header class="search-header"> <div class="col-md-2"><div class="logo-top">logo</div></div> <div class="col-md-5"><div id="custom-search-input"> <div class="row"> <div class="col-md-12"> <input class="search-query form-control" placeholder="Search product" type="text"> <span class="input-group-btn"> <button class="btn btn-danger" type="button"> <span class=" glyphicon glyphicon-search"></span> </button> </span> </div> </div> </div></div> <div class="col-md-4 pull-right"> <div class="login-register"> <ul> <li> <a href="#"> <i class="fa fa-sign-in" aria-hidden="true"></i> Login</a> </li> <li> <a href="#"> <i class="fa fa-user" aria-hidden="true"></i> Register</a> </li> <li> <div class="dropdown-widget"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> <svg aria-hidden="true" data-prefix="fas" data-icon="th" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="svg-inline--fa fa-th fa-w-16" style="font-size: 48px;"><path fill="currentColor" d="M149.333 56v80c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V56c0-13.255 10.745-24 24-24h101.333c13.255 0 24 10.745 24 24zm181.334 240v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm32-240v80c0 13.255 10.745 24 24 24H488c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24zm-32 80V56c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.256 0 24.001-10.745 24.001-24zm-205.334 56H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zM0 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H24c-13.255 0-24 10.745-24 24zm386.667-56H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zm0 160H488c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H386.667c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24zM181.333 376v80c0 13.255 10.745 24 24 24h101.333c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24H205.333c-13.255 0-24 10.745-24 24z" class=""></path></svg> </a> <ul class="dropdown-menu"> <li><a href="#"> Account Settings </a></li> <li><a href="#"> User stats </a></li> <li><a href="#"> Messages </a></li> <li><a href="#"> Favourites Snippets</a></li> <li><a href="#"> Sign Out</a></li> <li><a href="#"> Sign Out</a></li> </ul> </li> </ul> </div> </li> </ul> </div> </div> </header> </div> <!--footer --> <!--footer /--> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script> <script src="js/index.js"></script> </body> </html>
@font-face { font-family: 'MyriadPro-Regular_0'; src: url('../fonts/MyriadPro-Regular_0.eot'); src: local('☺'), url('../fonts/MyriadPro-Regular_0.woff') format('woff'), url('../fonts/MyriadPro-Regular_0.ttf') format('truetype'), url('../fonts/MyriadPro-Regular_0.svg') format('svg'); font-weight: normal; font-style: normal; } .login-register { float: left; width: 100%; } .login-register ul { float: left; width: 100%; margin: 10px 0; padding:0; } .login-register ul li { line-height: normal; list-style: none; float: left; margin: 0 10px; } .login-register ul li a { color: #042337; text-decoration:none; font-size:18px; font-family:MyriadPro-Regular_0; } .login-register ul li a:hover{ color:#f00; } .main-bg{ background:url(../images/bg.jpg) no-repeat 0 0; background-size:cover; } .logo { float: left; width: 100%; text-align: center; margin: 10px 0px; } .logo img{ display:inline-block; } .main-container { margin-top: 18%; } .main-container2 { margin-top: 10%; } .container::before { content: ""; background: #fff; width: 100%; position: fixed; height: 100%; left: 0; opacity: .9; z-index: -1; } #custom-search-input { margin:0; margin-top: 10px; padding: 0; } #custom-search-input .search-query { padding-right: 13px; padding-right: 4px \9; padding-left: 13px; 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: 6px; height: 60px; border: 6px solid #ececec; font-size: 20px; color:#042337; font-family:MyriadPro-Regular_0; } #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: 3px; color: #ff7f7f; font-size: 20px; } .search-query:focus + button { z-index: 3; } #custom-search-input .input-group-btn { position: absolute; font-size: 0; white-space: nowrap; right: 20px; top: 15px; z-index: 1000; } .form-control::-moz-placeholder { color: #000; opacity: 1; } footer { float: left; width: 100%; background: #f3f3f3; position: fixed; bottom: 0; z-index: 1000; } footer ul { margin: 0; padding: 10px 0; text-align: center; } footer ul li { line-height: normal; list-style: none; display: inline-block; margin: 0 10px; } footer ul li a { color: #000; text-decoration: none; } footer ul li a:hover{ color:#f00; } /*------- login css*-------*/ .log-in { border: 1px solid #587aa1; border-radius: 10px; padding-bottom: 16px; } .log-in form fieldset h2 { margin: 13px 0; padding: 0; } .button-checkbox { margin: 0 0 15px 0; display: block; } /*** serach page ***/ .search-header { float: left; width: 100%; background: #f5f5f5; padding: 30px 0 50px; } .logo-top { margin: 16px 0 0; float: left; } .dropdown-widget a svg { width: 27px; } .dropdown-widget .dropdown-menu { position: absolute; top: 100%; right: 0; left:auto } .dropdown-widget .nav { left: 0; margin-left: 0; top: 0; position: relative; width: auto; margin: 0; padding: 0; } .dropdown-widget .nav>li>a:hover, .dropdown-widget .nav>li>a:focus, .dropdown-widget .nav .open>a, .dropdown-widget .nav .open>a:hover, .dropdown-widget .nav .open>a:focus { background:none; } .dropdown-widget .dropdown { background:none; border:none; border-radius:4px; width: auto; } .dropdown-widget .dropdown-menu>li>a { color:#428bca; } .dropdown-widget .dropdown ul.dropdown-menu { border-radius: 4px; box-shadow: none; margin-top: 20px; width: 400px; padding: 15px 0px 0px 5px; } .dropdown-widget .dropdown ul.dropdown-menu:before { content: ""; border-bottom: 10px solid #fff; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; top: -10px; right: 16px; z-index: 10; } .dropdown-widget .dropdown ul.dropdown-menu:after { content: ""; border-bottom: 12px solid #ccc; border-right: 12px solid transparent; border-left: 12px solid transparent; position: absolute; top: -12px; right: 14px; z-index: 9; } .dropdown-widget .navbar-nav > li > a { padding: 0 15px; margin: 0; } .dropdown-widget ul.nav li ul.dropdown-menu li { width: 44%; float: left; height: 100px; border: 1px solid #ddd; margin-bottom: 15px; } .dropdown-widget ul.nav li ul.dropdown-menu li a{ height:100px; line-height:100px; text-align: center; padding:0; } /**---- Media ----**/ @media screen and (max-width:1400px){ .main-container { margin-top: 8%; } .main-container2 { margin-top: 4%; } } @media screen and (max-width:990px){ .btn-block { margin-bottom: 15px; } .logo-top { margin: 16px 0 0; float: left; width: 100%; text-align: center; } .logo-top img { display: inline-block; } .search-header #custom-search-input { float: left; width: 100%; } } @media screen and (max-width:767px){ .dropdown-widget .dropdown ul.dropdown-menu { border-radius: 4px; box-shadow: none; margin-top: 20px; width: 400px; padding: 15px 0px 0px 5px; position: absolute; background: #fff; } .search-header #custom-search-input { float: left; width: 100%; } .logo-top { margin: 16px 0 0; float: left; width: 100%; text-align: center; } .logo-top img { display: inline-block; } .login-register ul { padding: 0; } } @media screen and (max-width:360px){ .dropdown-widget .dropdown ul.dropdown-menu {width: 268px;} .dropdown-widget ul.nav li ul.dropdown-menu li {width: 90%;} }

Related: See More

Material Dashboard React
Awesome Search Box
Carousel with Search
Bootstrap 4 search Bar

Questions / Comments: