CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Carol.Kar
Carol.Kar

Reputation: 5345

Bootstrap 5 - center search box in navigation

I am using bootstrap 5 and would like to center the search box in the navigation.

I tried the following:

#the-basics {
  text-align: center;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">

<header class="p-3 bg-dark text-white">
  <div class="container">
    <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
      <a href="/" class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
                LOGO
            </a>
      <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
        <li><a href="#" class="nav-link px-2 text-secondary">Product</a></li>
      </ul>
      <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
        <div id="the-basics">
          <div class="input-group">
            <input name="searchField" id="searchField" type="search" class="form-control form-control-dark" style="width: 426px; " placeholder="Search for news, symbols, tickers or companies">
            <button class="btn btn-outline-secondary" type="button" id="button-addon2">Search</button>
          </div>
        </div>
      </form>

      <div class="text-end">
        <!-- <button type="button" class="btn btn-outline-light me-2">Login</button> -->
        <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#exampleModal">Sign-up</button>
      </div>

    </div>
  </div>
</header>

I tried using the following:

#the-basics {
  text-align: center;
}

However, the text does not center.

Any suggestions how to align the search box in the middle of teh navigation?

I appreciate your replies!

Upvotes: 0

Views: 2144

Answers (1)

Apoorv Bedmutha
Apoorv Bedmutha

Reputation: 89

I think this will work,Best of luck

#the-basics {
  text-align: center;
}
::-webkit-input-placeholder {
  text-align: center;
}

:-moz-placeholder {
  text-align: center;
}

Upvotes: 2

Related Questions