Bootstrap - unable to move search form to center of page-CodePudding

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

<div >
    <div >
        <div >
            <form  role="search">
                <input  type="search" placeholder="Search A Word Pattern" aria-label="Search">
                <button  type="submit">Search</button>
            </form> 
        </div>
    </div>

TIA for assistance!

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div >
  <div >
    <div >
      <form  role="search">
        <input  type="search" placeholder="Search A Word Pattern" aria-label="Search">
        <button  type="submit">Search</button>
      </form>
    </div>
  </div>
</div>

CodePudding user response：

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.

CodePudding user response：

Try this in your CSS -

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

Edit the max-width value as per your requirement.