Bootstrap Snippet Google search with search options using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Related: See More

Questions / Comments:

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

Related: See More

Questions / Comments:

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