Divide navbar in columns for Bootstrap

Question

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):

https://jsfiddle.net/6gc4guw7/

I belive you have to include bootstrap min.js cdn to make it work properly — Vipul Singh, Oct 05 '17 at 13:18
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js — Vipul Singh, Oct 05 '17 at 13:18

score 4 · Accepted Answer · answered Oct 05 '17 at 13:22

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>

Divide navbar in columns for Bootstrap

1 Answers1