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.