Learning HTML has been quite the journey for me. One challenge I have faced is trying to center a search bar on my web page. Despite hours of searching and trying different tutorials, I still haven't been able to make it work.
The CSS rule text-align: center; works fine for buttons, but not for the search bar. To style my webpage, I am using Bootstrap. Here's a snippet of my HTML code:
#search-bar {
height: 50px;
width: 50%;
border: 2px solid black;
border-radius: 25px;
}<form action="https://google.com/search">
<div class="form-row">
<div class="form-group col-lg-12" style="text-align: center;">
<input type="text" name="q" class="form-control" id="search-bar">
</div>
</div>
<div class="form-row">
<div class="form-group col-lg-12" style="text-align: center;">
<input type="submit" class="btn btn-primary" value="Google Search">
</div>
</div>
</form>