How do I add elements below my navbar using bootstrap? - html

Question

I have attempted to place elements below the navigation bar I created, however, it keeps distorting the NavBar. I have used bootstrap so I was hoping I could add a form underneath the code below, it's honestly just an issue of spacing and I have read the bootstrap documentation yet I still find it difficult. The code below is fine but could someone try to add a form or some kind of input box below it, please. Thank you, guys.
<! this is where the nav bar starts to be made>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<!this is the length and theme of the navigation bar is set>
<ul class="navbar-nav pl-2">
<! i've added padding left as i need to space out items in the nav bar well>
<li class="nav-item">
District 1
</li>
<! the home button is the name of the store>
<div class="mx-auto">
<form class="mx-auto order-0 col px-md-5">
<! this is the creation of the search bar>
<div class="mx-auto input-group mt-1">
<div class="input-group-prepend" style="margin-left: 380px; margin-top: 5px;">
<button class="btn btn-outline-secondary" type="button" id="button-addon1"><img
src="https://img.icons8.com/pastel-glyph/2x/search--v2.png" alt="Search" class="mx-auto"
width="20" height="20"></button>
<! this is the image for the search button function>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
aria-describedby="button-addon1" style="margin-top: 5px;">
</form>
</div>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item" style="padding-right: 120px;">
<a id="one" href="SignIn.php" class="nav-link" style="font-size: 15px;">Hello, <br> Sign in!</a>
</li>
<! this is the sign in button>
<li class="nav-item mr-5">
<a id="two" href="SignIn.php" class="nav-link"><img
src="https://img.icons8.com/pastel-glyph/2x/shopping-cart--v2.png" alt="Cart" width="40"
height="40"></a>
</li>
<! this is the shopping cart button>
</li>
</ul>

Answer 1

Here are examples of input fields and forms below your nav, is this what you are looking for?
Please see comments in the code to understand better.
Comment if you have more questions.
.flex-c-row {
display:flex;
align-items:center;
margin:25px;
} /* setting the display to flex, which is by default 'row' with items side-by-side; give it align-items:center to align items vertically in the available space */
.flex-c-row > * {
margin:50px; /* space all direct child elements of the outer container by 50px on all sides top bottom right left */
}
.flex-c-col, form {
display:flex;flex-direction:column; /* same as above but set the flexbox direction of elements as a COLUMN so vertical */
}
input {
cursor:pointer;
}
form > * {
margin:25px 0;
}
<nav class="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<ul class="navbar-nav pl-2">
<li class="nav-item">
District 1
</li>
<div class="mx-auto">
<form class="mx-auto order-0 col px-md-5">
<div class="mx-auto input-group mt-1">
<div class="input-group-prepend" style="margin-left: 380px; margin-top: 5px;">
<button class="btn btn-outline-secondary" type="button" id="button-addon1"><img
src="https://img.icons8.com/pastel-glyph/2x/search--v2.png" alt="Search" class="mx-auto"
width="20" height="20"></button>
</div>
<input type="text" class="form-control" placeholder="" aria-label="Example text with button addon"
aria-describedby="button-addon1" style="margin-top: 5px;">
</div>
</form>
</ul>
<ul class="navbar-nav ml-auto ">
<li class="nav-item" style="padding-right: 120px;">
<a id="one" href="SignIn.php" class="nav-link" style="font-size: 15px;">Hello, <br> Sign in!</a>
</li>
<li class="nav-item mr-5">
<a id="two" href="SignIn.php" class="nav-link"><img
src="https://img.icons8.com/pastel-glyph/2x/shopping-cart--v2.png" alt="Cart" width="40"
height="40"></a>
</li>
</ul>
</nav>
<!-- so here we simply add the container div for our 3 input examples -->
<div class="flex-c-row">
<div class="flex-c-col">
<span>This is an input field</span>
<input type="datetime-local">
</div>
<div class="">
<form>
<h3>This is a basic form.</h3>
<input>
<input>
<textarea cols="15" rows="25"></textarea>
</div>
<div class="flex-c-col">
<span>This is a color input field.</span>
<input type="color">
</div>
<div>
Codepen to play with:
https://codepen.io/larrytherabbit/pen/pobjKLw