'how could I modify bootstrap navbar with justify content between?
I'm trying to set up a navbar in bootstrap 4 where the brand, the nav items, and contact buttons are evenly spaced across the entire container, however, I'm having a hard time getting it like this, I tried justify-content-between but not working. Though it does respond to justify-content-center it doesn't render how I want it. Any idea Where I'm going wrong?
<div class="container">
<div class="row justify-content-between">
<nav class="navbar navbar-expand-sm navbar-light bg-light justify-content-between">
<div class="container">
<a class="navbar-brand text-success" href="#">
KT Mode
</a>
<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse"
id="navbarSupportedContent">
<ul class=" nav navbar-nav navbar-center">
<li class="nav-item active">
<a class="nav-link"
href="#">
My Work
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Events
</a>
</li>
<li class="nav-item">
<a class="nav-link"
href="#">
Learn
</a>
</li>
</ul>
<div class="align-content-end">
<i class="bi bi-instagram"></i>
<i class="bi bi-youtube"></i>
<!--
<span class="material-icons">info</span>s
<span class="material-icons">info</span>
-->
<button class="btn btn-outline-success my-2 my-sm-0" type="button"data-toggle="modal" data-target="#modalContactForm">Contact</button>
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form34" class="form-control validate">
<label data-error="wrong" data-success="right" for="form34">Your name</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form29" class="form-control validate">
<label data-error="wrong" data-success="right" for="form29">Your email</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-tag prefix grey-text"></i>
<input type="text" id="form32" class="form-control validate">
<label data-error="wrong" data-success="right" for="form32">Subject</label>
</div>
<div class="md-form">
<i class="fas fa-pencil prefix grey-text"></i>
<textarea type="text" id="form8" class="md-textarea form-control" rows="4"></textarea>
<label data-error="wrong" data-success="right" for="form8">Your message</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-unique">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal" data-target="#modalContactForm"></a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
Solution 1:[1]
<div class="container">
<div class="row justify-content-between">
<nav class="navbar navbar-expand-sm navbar-light bg-light justify-content-between">
<div class="container justify-content-between">
<a class="navbar-brand text-success" href="#">
KT Mode
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-around" id="navbarSupportedContent">
<ul class=" nav navbar-nav navbar-center">
<li class="nav-item active">
<a class="nav-link" href="#">
My Work
<span class="sr-only">
(current)
</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
About
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Events
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
Learn
</a>
</li>
</ul>
<div class="align-content-end">
<i class="bi bi-instagram"></i>
<i class="bi bi-youtube"></i>
<!--
<span class="material-icons">info</span>s
<span class="material-icons">info</span>
-->
<div class="modal fade" id="modalContactForm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header text-center">
<h4 class="modal-title w-100 font-weight-bold">Write to us</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body mx-3">
<div class="md-form mb-5">
<i class="fas fa-user prefix grey-text"></i>
<input type="text" id="form34" class="form-control validate">
<label data-error="wrong" data-success="right" for="form34">Your
name</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-envelope prefix grey-text"></i>
<input type="email" id="form29" class="form-control validate">
<label data-error="wrong" data-success="right" for="form29">Your
email</label>
</div>
<div class="md-form mb-5">
<i class="fas fa-tag prefix grey-text"></i>
<input type="text" id="form32" class="form-control validate">
<label data-error="wrong" data-success="right"
for="form32">Subject</label>
</div>
<div class="md-form">
<i class="fas fa-pencil prefix grey-text"></i>
<textarea type="text" id="form8" class="md-textarea form-control"
rows="4"></textarea>
<label data-error="wrong" data-success="right" for="form8">Your
message</label>
</div>
</div>
<div class="modal-footer d-flex justify-content-center">
<button class="btn btn-unique">Send <i
class="fas fa-paper-plane-o ml-1"></i></button>
</div>
</div>
</div>
</div>
<div class="text-center">
<a href="" class="btn btn-default btn-rounded mb-4" data-toggle="modal"
data-target="#modalContactForm"></a>
</div>
</div>
</div>
<button class="btn btn-outline-success my-2 my-sm-0" type="button" data-toggle="modal"
data-target="#modalContactForm">Contact</button>
</div>
</nav>
</div>
</div>
put the button outside of the navbar-collapse and add class to the container justify-content-between, also add class to the navbar-collapse that justify-content-around
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Pinal Sukhadiya |