I have been utilizing bootstrap for the styling of my page. However, I have successfully centered other elements vertically and horizontally, except for the input field and button.
The input field and button are currently being displayed on the left side of the page. I have experimented with various bootstrap class options, but unfortunately, I haven't been able to achieve the desired centering effect.
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>