CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapbootstrap-4
Akshay
Akshay

Reputation: 15

Equal space between navigation icons

How to have facebook navigation like alignments in Bootstrap?

Run the code in full page. 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
  <ul class="navbar-nav">
    <li class="nav-item"><a href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a></li>
  </ul>
</nav>

As facebook navigation icons have equal space between each other, how can I acheive it in my navigation?

Note: If the screen gets bigger/shorter it should auto adjust them self.

Upvotes: 0

Views: 338

Answers (3)

fnostro
fnostro

Reputation: 4591

Simpler than I thought with no need to redefine the BS4 CSS. I modified the navbar to use bs4 markup without the ul and li...seems cleaner this way

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">

<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
  <div class="navbar-nav w-100 nav-justified">
    <a class="nav-item" href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a>
    <a class="nav-item" href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a>
    <a class="nav-item" href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a>
    <a class="nav-item" href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a>
  </div>
</nav>

Upvotes: 1

Mirso
Mirso

Reputation: 1

You can do something like this:

   .navbar-nav {
      display: flex;
    }
    .nav-item {
      flex: 1;
      text-align: center;
      margin: 5px;
    }

Upvotes: 0

Chase DeAnda
Chase DeAnda

Reputation: 16441

You can use flexbox to evenly space each nav item:

.navbar-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}


.navbar-nav {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
<nav class="navbar navbar-expand-sm fixed-top" style="background-color: #ffdbae;">
  <ul class="navbar-nav">
    <li class="nav-item"><a href="http://localhost/mp/"><i class="fas fa-book-open" style="font-size:40px; color:#00CED1;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/post"><i class="fas fa-pen-fancy" style="font-size:40px; color:#fff;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/settings"><i class="fas fa-sliders-h" style="font-size:40px; color:#fff;"></i></a></li>
    <li class="nav-item"><a href="http://localhost/mp/profile"><i class="fas fa-user" style="font-size:40px; color:#fff;"></i></a></li>
  </ul>
</nav>

Upvotes: 2

Related Questions