Adjust navbar elements Bootstrap 4

Question

I have been struggling on adjusting my navbar elements Navbar picture

The issue is to :

Put the input div and search button on the left next to the brand image.
Modify the width of the input divs. I have tried the col-6 but it did not work

Bellow is the code :

<meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light">
      <a class="navbar-brand" href="#">
          <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
          Bootstrap
        </a>
    <button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav"
      aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <form class="form-inline my-lg-0 ml-auto">
            <input class="form-control my-2 mr-sm-2" type="search" placeholder="Search for people, firms" aria-label="
              Search">
            <input class="form-control my-2 mr-sm-2" type="search" placeholder="Location (e.g., Los Angeles)"
              aria-label="Search">

            <button class="btn btn-outline-dark my-2 my-sm-0" type="submit"><i class="fas fa-search"></i>
              Search</button>
          </form>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#"> <i class="fas fa-ticket-alt"></i> Support <span
              class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#"><i class="fas fa-user-plus"></i> Sign up</a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#"><i class="fas fa-sign-in-alt"></i> Log in</a>
        </li>
        <li class="nav-item">
          <a class="nav-link px-3" href="#"><i class="fas fa-search"> </i> Search</a>
        </li>
      </ul>

Once the navbar is adjusted, I want to integrate it in a Struts 1 project. I can not add a placeholder value to the input div. Do you have any idea?

 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">.   </script>

<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<%@ taglib uri="/WEB-INF/taglib/struts-html.tld" prefix="html" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="mfb" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="${homeUrl}">
    <img src="<mfb:base/>images/logo.png" width="200" class="d-inline-block align-top" alt="">
</a>
<button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarNav">

    <ul class="navbar-nav ml-lg-5">
        
        <html:form action="fulltextsearch" styleClass="form-inline my-lg-0 ml-auto">
            <c:if test="${currentUserContext.moduleSearchWhatEnabled}">
                <label for="user" class="infield"><mfb:message key="label.autocompleteUser"/></label>
                <html:text
                        property="user"
                        styleId="user"
                        styleClass="form-control px-4 my-2 mr-sm-2"/>
            </c:if>

Here is a screenshot of the result. Screenshot search input in struts 1

Thank you.

score 0 · Answer 1 · answered Oct 15 '20 at 13:01

Use 2 separate navbar-nav's

<nav class="navbar navbar-expand-lg navbar-light">
    <a class="navbar-brand" href="#">
        <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> Bootstrap </a>
    <button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <form class="form-inline my-lg-0 ml-auto">
                    <input class="form-control my-2 mr-sm-2" type="search" placeholder="Search for people, firms" aria-label="
              Search">
                    <input class="form-control my-2 mr-sm-2" type="search" placeholder="Location (e.g., Los Angeles)" aria-label="Search">
                    <button class="btn btn-outline-dark my-2 my-sm-0" type="submit"><i class="fas fa-search"></i> Search</button>
                </form>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="nav-link px-3" href="#"> <i class="fas fa-ticket-alt"></i> Support <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-3" href="#"><i class="fas fa-user-plus"></i> Sign up</a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-3" href="#"><i class="fas fa-sign-in-alt"></i> Log in</a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-3" href="#"><i class="fas fa-search"> </i> Search</a>
            </li>
        </ul>
    </div>
</nav>

Demo: https://codeply.com/p/tLF5C7gwjv

Thank you, it did really work. Do you have any idea for modifying the input width — Marquise Mery, Oct 15 '20 at 13:20
That would need to be custom, and not something Bootstrap will do "out of the box". See https://stackoverflow.com/questions/17302794/how-to-set-an-input-width-to-match-the-placeholder-text-width — Carol Skelly, Oct 15 '20 at 14:13
Actually, I do want it to fit exactly the placeholder but just to be able to read the placeholder message. — Marquise Mery, Oct 15 '20 at 14:30

score 0 · Answer 2 · answered Oct 15 '20 at 13:11

I understand the problem yo are facing have a solution to it. To bring the search and input divs to the left near the icon image just add ml-1 and onwards for the elements in the order you wish to. To modidfy the width of the input divs use py and px (eg: py-2 or px-3). py is padding in the y axis and px is padding in the x axis. Simalarly my means margin, ml mans margin-left, mt means margin-top, mr means margin-right and mb means margin-bottom. If you still face any issues just ask me and I will send you the code as the solution :)

The padding to modify the width of the input is not working because it modify the width but the placeholder message space is still small. — Marquise Mery, Oct 15 '20 at 13:19

Rafee Shaik · Answer 3 · 2020-10-15T13:29:33.797

Place the input div and search button in a seperate div and add class="mr-auto" to it.

<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
    <img src="/docs/4.4/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
</a>
<button class="navbar-toggler bg-light" type="button" data-toggle="collapse" data-target="#navbarNav"
        aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item">
            <form class="form-inline my-lg-0 ml-auto">
                <input class="form-control my-2 mr-sm-2" type="search" placeholder="Search for people, firms" aria-label="
                       Search">
                <input class="form-control my-2 mr-sm-2" type="search" placeholder="Location (e.g., Los Angeles)"
                       aria-label="Search">

                <button class="btn btn-outline-dark my-2 my-sm-0" type="submit"><i class="fas fa-search"></i>
                    Search</button>
            </form>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            <a class="nav-link px-3" href="#"> <i class="fas fa-ticket-alt"></i> Support <span
                    class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-3" href="#"><i class="fas fa-user-plus"></i> Sign up</a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-3" href="#"><i class="fas fa-sign-in-alt"></i> Log in</a>
        </li>
        <li class="nav-item">
            <a class="nav-link px-3" href="#"><i class="fas fa-search"> </i> Search</a>
        </li>
    </ul>
</div>

Adjust navbar elements Bootstrap 4

3 Answers3