CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-5
Rifat Rakib
Rifat Rakib

Reputation: 134

Fixing alignment of search bar using bootstrap 5.0

How can I change the alignment of the search bar and the button to the left continuously after the navbar-brand element? I tried adding justify-content-start bootstrap, text-left bootstrap classes, but none of them worked. The code snippet is given here:

<nav class="navbar navbar-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="/">
      <img src="images/logo.png" width="200" />
    </a>
    <form class="d-flex">
      <input class="form-control me-2" type="text" />
      <button class="btn btn-outline-info" type="submit">Search</button>
    </form>
  </div>
</nav>

Upvotes: 0

Views: 857

Answers (1)

user1575941
user1575941

Reputation:

Flex is applied to the children. You are correct in the justify-content-start assumption - just need to add it to the parent container. Like so:

<nav class="navbar navbar-light">
  <div class="container-fluid justify-content-start">
    <a class="navbar-brand" href="/">
      <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAUAAarVyFEAAAAASUVORK5CYII=" width="200" height="32" style="outline:1px dotted red" />
    </a>
    <form class="d-flex">
      <input class="form-control me-2" type="text" />
      <button class="btn btn-outline-info" type="submit">Search</button>
    </form>
  </div>
</nav>

Upvotes: 1

Related Questions