Bootstrap 4 | Can't keep a search box on the same line with a custom navbar's items

Question

I made a custom navbar using Bootstrap 4's grid. This navbar is split into two parts: left part contains navbar items and right part contains a search box. The problem is that the search box doesn't stay in the right part of my navbar no matter what. It always goes under the navbar items (left part).

Here is my HTML & CSS code:

.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        </div>
        <div class="custom-navbar-search col-4">
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

How do I properly position a search box on the same line with navbar's items?

P.S.: There are no tags around the "input" because I tried with them and without them, both ways didn't work so I didn't change code since the last try.

P.P.S.: I've searched Google and Stackoverflow before posting my own question. None of the suggested answers there were of help to me. Most of people suggest that the navbar has too many items and so it can't fit the search box, moving it on the next line instead, but I think that's silly because I've tried it even with only 2 items in my navbar.

Granny · Accepted Answer · 2017-09-22T12:05:21.587

0

Is this what you want?

If you want to have the searchbar pulled to the right, add:

class="float-right"

.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

edited Sep 22 '17 at 12:05

answered Sep 22 '17 at 12:00

Granny

783
11
22

Hi! I want it on the right. That's why I seperated the navbar in two columns, so that the second one could keep the searchbox and make it easier to keep it far away from the first column which holds the items. – Dream Sep 22 '17 at 12:04
@Dream I cant test it cause the bootstrap files are not in your question so i have to rely on other asked questions to get it to be pulled right. [Check this out](https://stackoverflow.com/questions/42442323/bootstrap-4-alpha-6-col-align-right) – Granny Sep 22 '17 at 12:06
I think that's good enough for my current purpose. Thank you. – Dream Sep 22 '17 at 12:10

score 0 · Answer 2 · answered Sep 22 '17 at 12:15

The search box doesn't stay on the right part of your links because both the custom-navbar-buttons and custom-navbar-search are block level elements. So they both tend to arrange on top of each other taking up the whole width of their parent div which is custom-navbar.

You need to make them both inline.

.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  display:inline-block;
}

.custom-navbar-search {
  display: inline-block;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        </div>
        <div class="custom-navbar-search col-4">
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

Or you can simply use flexbox which will give you more control over your navbar.

.custom-navbar {
  display:flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
 }
 
.custom-navbar-buttons p {
  display: inline;
  color: black;
  margin-right: 0.4rem;
}

.custom-navbar-buttons {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

<body>
  <div class="container">
    <div class="row">
      <div class="custom-navbar col-12 bg-success">
        <div class="custom-navbar-buttons col-8">
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
          <p>Button</p>
        </div>
        <div class="custom-navbar-search col-4">
          <input type="text" name="search" placeholder="search this site">
        </div>
      </div>
    </div>
  </div>
</body>

This is also a working way. In case someone can't or doesn't want to use the first one, use this one. Thanks. — Dream, Sep 23 '17 at 08:12

Bootstrap 4 | Can't keep a search box on the same line with a custom navbar's items

2 Answers2