Bootstrap Snippet Search OR Show/Hide Responsive 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.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<br/>
<br/>
<br/>
<div class="box1">
    <div class="box2">
        <div class="box3">
                <div class=" show-or-hide">
                    <div class="row">
                        <div class="col-xl-4">
                            <div class="form-group" id="hide">
                                <label>search</label>
                                <input type="text" class="form-control"  placeholder="Input">
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="form-group"  id="hide">
                                <label>search</label>
                                <input type="text" class="form-control" placeholder="Input">
                            </div>
                        </div>
                        <div class="col-xl-4">
                            <div class="form-group"  id="hide">
                                <label>search</label>
                                <input type="text" class="form-control"  placeholder="Input">
                            </div>
                        </div>
                    
                        <div class="col-xl-8">
                            <div class="form-group"  id="hide">
                                <label>search</label>
                                <select type="text" class="form-control">
                                    <option>SELECT</option>
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
.box1{
    height: 100%;
    background: #6a89cc;
}
.box1 .box2{
    margin-left: 8%;
    margin-right:8%;
    height: 100%;
    background: #4a69bd;
}
.box1 .box2 .box3{
    margin-left: 4%;
    margin-right:4%;
    height: 100%;
    background: #1e3799;
    padding:4%;
}
input,button{
    margin-top: 5%;
    margin-bottom: 5%;
    text-transform:uppercase;
}
.btn{
    width: 100%;   
}
label{
    color: #fff;
    text-transform:uppercase;
}
@media only screen and (max-width: 992px) {
.show-or-hide:hover #hide  {
 display: unset;
}
#hide {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Search OR Show/Hide Responsive"
Bootstrap 4.1.1 Snippet by yui.napassorn

Related: See More

Questions / Comments:

"Search OR Show/Hide Responsive" Bootstrap 4.1.1 Snippet by yui.napassorn

Related: See More

Questions / Comments:

"Search OR Show/Hide Responsive"
Bootstrap 4.1.1 Snippet by yui.napassorn