Bootstrap - unable to move search form to center of page

user_13950022 0
Viewed 46

I have a page with just two component - a menu and a search form. I can't get the search form to be centered on the page even though, according to Bootstrap documentation, I should be able to do so by adding align-items-center to the row. I'm pretty sure I'm doing something wrong. I'm new to both bootstrap and CSS :( ...

Screenshot of what the page looks like in the browser enter image description here

<div class="container searchcontainer">
    <div class="row align-items-center">
        <div class="col">
            <form class="searchform d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search A Word Pattern" aria-label="Search">
                <button class="btn SearchButton" type="submit">Search</button>
            </form> 
        </div>
    </div>

TIA for assistance!

bootstrap-5 css html
3 Answers

If you mean centered vertically, you need to add some sort of height to get the align-items-center to do anything of which bootstrap has vh (viewport height) for, set to 100 in this case so it's right in the middle of the page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="container searchcontainer">
  <div class="row align-items-center vh-100">
    <div class="col">
      <form class="searchform d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search A Word Pattern" aria-label="Search">
        <button class="btn SearchButton" type="submit">Search</button>
      </form>
    </div>
  </div>
</div>

user_85650100

First of all, you have a container and then a col inside which is wrong. The layout classes should be nested in this order: container > row > col. All the content should be within col.

You can apply align-items-center to col but you have to limit the search box's width, otherwise, if it takes the full width of the column, the centering won't be noticeable.

So please try w-50 for example, on the search form.

user_9751640

Try this in your CSS -

.row {
    margin: 0 auto;
    max-width: 50%;
}

Edit the max-width value as per your requirement.

user_104413650
Related