Bootstrap 3 equally spaced buttons in container

HTML-CSS
1

Working on a small Bootstrap 3 project where client wants to equally space/float four small buttons horizontally in the the Navbar Collapse region or container. What would be the best way in CSS to pull this off?

Obviously, it’s much easier in Bootstrap 4 with flexbox.

2

Something like this?

<parentElement class="parent >
child elements
</parentElement>

And a CSS class similar to

.parent{
display:flex;
flex-direction:row;
justify-content:space-around
}

Or another simple posibility

.parent{
display:grid;
grid-template-columns:repeat(4, 1fr);
place-items:center;
}
1 Like
3

Hey man!

So my big issue was the fact that I was using flex in the wrong div element, when I needed to be targeting a nested div within .navbar-collapse called “region-navigation-collapsible”.

Anyway, your CSS structure is much cleaner than mine, so I’m using it in this project now. Thanks!

1 Like