How to make a search on the right?

Question

<nav class="navbar navbar-default">
                    <div class="container-fluid">

                        <div class="navbar-header">
                            <button type="button" id="sidebarCollapse" style="background-color: #7726E5; color: white; display:inline-block;" class="btn navbar-btn">
                                <i class="fas fa-align-left"></i>
                                <span>Menu</span>
                            </button>
                            <form style="display:inline-block;" class="form-inline my-2 my-lg-0" action="{% url 'posts_list_url' %}">
                                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search">
                            </form>
                        </div>
                    </div>
                </nav>

This is my code. I use bootstrap 4 Don't look on it: kljkldfsgjldfskgjl dfklj dkfjk dakfj kljd kj kdlsjfklj kldasjfk dkfj lkdsjf klsadfjlkds di

Possible duplicate of [Bootstrap 4 navbar items on right side](https://stackoverflow.com/questions/40178386/bootstrap-4-navbar-items-on-right-side) — yaara, Jan 13 '19 at 16:07

score 0 · Answer 1 · answered Jan 13 '19 at 16:27

0

You can try this.

navbar-header{ width:100%; } and form{ float:right; }

answered Jan 13 '19 at 16:27

Mittal Savaniya

76
4

score 0 · Accepted Answer · answered Jan 13 '19 at 19:34

You have to reduce a lot of non needed divs and you will obtain what you want. Check the documentation for more details (https://getbootstrap.com/docs/4.2/components/navbar/#forms)

#sidebarCollapse {
  background-color: #7726E5;
  color: white;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<nav class="navbar navbar-light bg-light">
  <button type="button" id="sidebarCollapse" class="btn navbar-btn">
     <i class="fas fa-align-left"></i>
     <span>Menu</span>
  </button>
  <form class="form-inline my-2 my-lg-0" action="{% url 'posts_list_url' %}">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" name="search">
  </form>
</nav>

How to make a search on the right?

2 Answers2