Divide navbar in columns for Bootstrap
15,085
after adding cdn
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js
add col-xs-4 or col-sm-4 or col-md-4 or col-lg-4 as per required in the class as below.
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a href="#" class="col-xs-4 navbar-brand">Logo</a>
<ul class=" col-xs-4 navbar-nav mx-auto">
<li class="nav-item"><a href="#" class="nav-link">Link 1</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 2</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 3</a></li>
<li class="nav-item"><a href="#" class="nav-link">Link 4</a></li>
</ul>
<form class="form-inline">
<input type="text" class="col-xs-4 form-control" placeholder="Search">
</form>
</nav>
Author by
kexxcream
Updated on June 29, 2022Comments
-
kexxcream almost 2 years
Problem:
I would like to make two parts of a navbar in Bootstrap 4 Beta to be exactly the same size and the rest in the center.
- Column 1 contains the brand.
- Column 2 contains links and the content should be center.
- Column 3 contains a search field.
Column 1 and 3 should be exactly the same size.
It does not seem to be possible to use columns in navbar as the content does not adjust accordingly?
So I came up with a different solution but column 1 and 3 are not the same size. How do I make sure that column 1 and 3 are always the same? Is there a way without involving custom css?
HTML code:
<!-- Navigation --> <nav class="navbar navbar-expand-md navbar-dark bg-dark"> <a href="#" class="navbar-brand">Logo</a> <ul class="navbar-nav mx-auto"> <li class="nav-item"><a href="#" class="nav-link">Link 1</a></li> <li class="nav-item"><a href="#" class="nav-link">Link 2</a></li> <li class="nav-item"><a href="#" class="nav-link">Link 3</a></li> <li class="nav-item"><a href="#" class="nav-link">Link 4</a></li> </ul> <form class="form-inline"> <input type="text" class="form-control" placeholder="Search"> </form> </nav>
Minimal Working Example (MWE):
-
Vipul Singh over 6 yearsI belive you have to include bootstrap min.js cdn to make it work properly
-
Vipul Singh over 6 years