Horizontally center the form and button html

Question

I am using bootstrap for styling.

I have managed to center vertically and horizontally other things but not input and the button.

Input and button are displayed on the left side of the page. i tried differen bootstrap class options but couldnt manage it.

 body { background-color: whitesmoke; height: 90%; display: flex; align-items: center; } html { height: 90%; } .row { text-align: center; } .random { text-decoration: none; margin-bottom: 50px; } .icon { max-width: 25%; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col random"> <button class="btn btn-primary"> <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random article</a> </button> </div> </div> <div class="row"> <form class="col icon"> <input type="text" class="form-control"> </form> <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button> </div> <div class="row"> <div class="col"> Click icon to search </div> </div> </div> 

Answer 1

 body { background-color: whitesmoke; height: 90%; display: flex; align-items: center; } html { height: 90%; } .row { text-align: center; } .random { text-decoration: none; margin-bottom: 50px; } .icon { max-width: 25%; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col random"> <button class="btn btn-primary"> <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">Click here for a random article</a> </button> </div> </div> <form class="col icon"> <div class="row"> <input type="text" class="form-control"> </div> <div class="row"> <div class="col"> <button type="submit" class="btn btn-primary"><i class="fa fa-search"></i></button> </div> </div> </form> <div class="row"> <div class="col"> Click icon to search </div> </div> </div>