Justifying Bootstrap navbar-nav list items with even space

Question

I have a navbar menu with a few list items. I need even white space between them, and this is difficult for me since some list items are longer than others.

I've looked at this question but it doesn't address my problem, though I did use it for centering and justifying the navbar.

Here is a bootply: http://www.bootply.com/UjY99PYpe7

Is a fixed padding for each list item what you are looking for, like so: http://www.bootply.com/De8KGK6Gz4 ?? — Luuk Skeur, Jun 21 '16 at 19:43
@LuukSkeur No. Your solution isn't responsive. And goes on two lines at some point. — Rachel S, Jun 21 '16 at 19:50

score 2 · Accepted Answer · answered Jun 21 '16 at 19:47

2

Try this css in your bootply:

.navbar-nav {
    text-align: justify;
    min-width: 100%;
}
.navbar-nav:after {
    content: '';
    display: inline-block;
    width: 100%;
}
.navbar-nav li {
    display: inline-block;
    float:none;
}

answered Jun 21 '16 at 19:47

Genius solution :) Thank you so much! – Rachel S Jun 21 '16 at 19:55
Is not my idea, I saw long ago in a blog and I used several times – Jun 21 '16 at 20:08
@RachelS I thought you wanted no blankspaces between buttons. – warkentien2 Jun 21 '16 at 20:15
@warkentien2 I do need space, it just has to be even space between them. I'll look at your full width idea tomorrow. – Rachel S Jun 22 '16 at 02:33
@RachelS do test! it looks closer to your initial bootply layout, but even spaced. – warkentien2 Jun 23 '16 at 00:54

score 2 · Answer 2 · edited Jun 20 '20 at 09:12

2

If you wish your buttons to be full width

Try this `flexbox` solution

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

.navbar-nav > li {
  flex-grow: 1;
  text-align: center;
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 21 '16 at 20:22

warkentien2

969
13
20

Works, too, but already implemented pp's suggestion so will stay with that. Thanks for your help! – Rachel S Jun 23 '16 at 13:49
@RachelS just giving more problems for future users. thanks! – warkentien2 Jun 23 '16 at 16:31
Just wanted to let you know that I used your solution today on a different site ;) – Rachel S Mar 24 '17 at 15:13
1

Thanks for telling me! I'm glad I could help. – warkentien2 Mar 25 '17 at 15:37
1

Flexbox subdivided the space evenly among elements. `flex-grow` stretches element to fill in the entire space created for it. You can apply different `flex-grow` sizes to give that element a proportionally larger space. – warkentien2 Mar 27 '17 at 20:17

Justifying Bootstrap navbar-nav list items with even space

2 Answers2

Try this flexbox solution

Try this `flexbox` solution