Bootstrap v4.5 Navbar Multiline Alignment and Elements Width

Question

After many attempts I am failed to create following layout using Bootstrap v4.5. I want menu button on the left and logo in the centre of the top row. Second row to have full width search textbox with search icon inside the textbox.

How to achieve this?

I was able to layout elements With the help from her here and CSS but having difficulty in aligning as in below screenshot i.e. 1) right div is not aligned horizontally with left and centred div 2) search icon appears above the textbox on the left whereas I am trying to keep it inside the textbox on the right side. reducing textbox width is not helping.

<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container bg-warning">
    <div class="d-flex flex-column w-100 justify-content-end bg-success p-1" id="navbarCollapse">
        <div class="pt-1 pb-0 px-lg-2 bg-success w-100 text-left" id="container">
            <div class="bg-danger" id="left">left</div>
            <div class="bg-danger" id="center">center</div>
            <div class="bg-danger" id="right">right</div>
        </div>
        <div class="pt-1 pb-0 px-lg-2 bg-success w-100 text-left" id="container">
            <i class="fa fa-search "></i>
            <input type=" text " class="form-control " placeholder="Search " />
        </div>
    </div>
</div>

    #container {
    width: 100%;
}

#left {
    float: left;
    width: 100px;
}

#right {
    float: right;
    width: 100px;
}

#center {
    margin: 0 auto;
    width: 100px;
}

Please show the code you've attempted and explain what is not working with that code. — Carol Skelly, Apr 22 '21 at 18:03
Sorry, should have done it before. Used one of your answers to layout as in edited contents. — frmpk, Apr 23 '21 at 08:44

score 0 · Answer 1 · answered Apr 25 '21 at 11:32

<nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
<div class="container bg-warning">
    <div class="d-flex flex-column w-100 bg-success" id="navbarCollapse">
        <div class="pt-1 pb-0 px-lg-2 bg-success w-100 text-left" id="container">
            <div class="bg-danger" id="left">left</div>
            <div class="bg-danger" id="right">right</div>
            <div class="bg-danger" id="center">center</div>
        </div>
        <div class="pt-1 pb-0 px-lg-2 bg-success w-100 text-left" id="container">
            <div class="input-group-append">
                <input type=" text " class="form-control " placeholder="Search " />
                <a href="#">
                    <i id="filtersubmit" class="fa fa-search "></i>
                </a>
            </div>
        </div>
    </div>
</div>

To put search icon I used css from here, also copying down:

#filtersubmit {
position: relative;
z-index: 1;
left: -25px;
top: 1px;
color: #7B7B7B;
cursor: pointer;
width: 0;

}

Bootstrap v4.5 Navbar Multiline Alignment and Elements Width

1 Answers1