<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> </select> </div> </div> <div class="col-xl-4"> <button type="submit" class="btn">Submit</button> </div> </div> </div> </div> </div> </div>

.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 { display: none; } }