Search input center header and button with Bootstrap 5

October 14, 2023

I am trying to build a simple search page, but I am having a hard time getting the elements aligned properly.

I would like to have the company name centered over the search input and I would like to have the buttons centered under the search input with a little spacing between them.

<div class="backgroundWhite">
<div class="row">
    <div class="col-md-5 mx-auto align-content-center">
        <h3 class="mt-lg-5 align-content-center">Company Name</h3>
        <div class="input-group">
            <input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" placeholder="Search for your organization" id="example-search-input">
            <span class="input-group-append">
                <button class="btn rounded-pill border-0 ms-n5" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
        </div>
        <a asp-page="Detail" class="btn btn-success mr-1 mb-2 w-25 mt-3">
            Players
        </a>
        <a asp-page="../Checkout/Index" class="btn btn-checkout mr-1 mb-2 w-25 mt-3">
            Organizers
        </a>
    </div>
</div>

Any help would be appreciated

>Solution :

Try this :

I just replaced below code

align-content-center to text-center

 <div class="col-md-5 mx-auto align-content-center">
 to 
 <div class="col-md-5 mx-auto text-center">

 and

 <h3 class="mt-lg-5 align-content-center">Company Name</h3>
 to
 <h3 class="mt-lg-5">Company Name</h3>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 5 Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<div class="backgroundWhite">
<div class="row">
    <div class="col-md-5 mx-auto text-center">
        <h3 class="mt-lg-5">Company Name</h3>
        <div class="input-group">
            <input class="form-control py-2 rounded-pill mr-1 pr-5" type="search" placeholder="Search for your organization" id="example-search-input">
            <span class="input-group-append">
                <button class="btn rounded-pill border-0 ms-n5" type="button">
                    <i class="fa fa-search"></i>
                </button>
            </span>
        </div>
        <a asp-page="Detail" class="btn btn-success mr-1 mb-2 w-25 mt-3">
            Players
        </a>
        <a asp-page="../Checkout/Index" class="btn btn-checkout btn-warning mr-1 mb-2 w-25 mt-3">
            Organizers
        </a>
    </div>
</div>

</body>
</html>