Bootstrap Snippet Search Hidden Bootstrap 4 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
<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="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
         <!--<form class="form-horizontal my-2 my-md-0 search-form" [formGroup]="searchForm" role="form" (ngSubmit)="onSubmit()">
      <div class="input-group" [ngClass]="{'has-error':!searchForm.controls['searchText'].valid}">
        <input type="text" class="form-control mr-sm-2" size="50" formControlName="searchText">
        <span class="input-group-btn">
            <button class="btn btn-default my-2 my-sm-0" type="submit" >
             <i class="glyphicon glyphicon-search" aria-hidden="true"></i>
            </button>
       </span>
      </div>
    </form>-->
    <div class="col-lg-6" style="margin-top: 7px;">
      <form class="form-horizontal my-2 my-md-0 search-form" [formGroup]="searchForm" role="form" (keyup.enter)="onSubmit()">
          <div class="input-group">
            <input type="text" class="form-control" formControlName="searchText" size="50">
            <span class="input-group-btn fa fa-search form-control-feedback">
            </span>
        </div>
      </form>
    </div>
</div>
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
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
.search-form .input-group {
  float: right !important;
  transition: all 0.35s, border-radius 0s;
  width: 32px;
  height: 32px;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  border-radius: 25px;
  border: 1px solid #ccc;
}
.search-form .input-group input.form-control {
  margin-left: -25px;
  border:none;
  background: transparent;
  box-shadow: none;
  display:block;
  padding: 1rem 2rem;
}
.search-form .input-group input.form-control::-webkit-input-placeholder {
  display: none;
}
.search-form .input-group input.form-control:-moz-placeholder {
  /* Firefox 18- */
  display: none;
}
.search-form .input-group input.form-control::-moz-placeholder {
  /* Firefox 19+ */
  display: none;
}
.search-form .input-group input.form-control:-ms-input-placeholder {
  display: none;
}
.search-form .input-group:hover,
.search-form .input-group.hover {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Search Hidden Bootstrap 4"
Bootstrap 4.0.0 Snippet by kodakro

Related: See More

Questions / Comments:

"Search Hidden Bootstrap 4" Bootstrap 4.0.0 Snippet by kodakro

Related: See More

Questions / Comments:

"Search Hidden Bootstrap 4"
Bootstrap 4.0.0 Snippet by kodakro