How to fix bootstrap navbar button spacing?

Question

I know this is a dumb question I should know how to solve, but I don't do front-end that much.

So, I'm making a cool navbar with bootstrap, but when I try to add more than one button, the button spacing gets weird.

Does anyone know how to fix this problem?

     <nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #333;">
    <a class="navbar-brand" href="/">
      <img src="/static/img/AdiAvi.png" width="30" height="30" class="d-inline-block align-top" alt="">
      AdiAvi
    </a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a  class="nav-link active"   class="nav-link"  href="/">Home</a>
        </li>
        <li class="nav-item">
          <a  class="nav-link" href="/contact">Contact</a>
        </li>
        
        <button type="button" id="loginButton" class="ml-2 btn btn-danger navbar-btn">
          Login
      </button>
        
        
        <button type="button" id="registerTrigger" class="ml-2 btn btn-primary navbar-btn">
            Register
        </button>
        
      </ul>
    </div>
  </nav>

Also the buttons I am looking at are the login and register buttons.

I am using BootStrap 5

Here is an example image of what happens when I run the code:

I tried using position relative to make the distance regular, but instead, what happened was that it stayed the same. Results

It looks like there's no default spacing. Have you tried the solutions from this post?: https://stackoverflow.com/questions/18065062/bootstrap-css-space-between-buttons-in-navbar — Felix Schildmann, Dec 03 '22 at 20:27
How do you want it to look like exactly? With a space between the buttons? — Felix Schildmann, Dec 03 '22 at 23:23
Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. — Community, Dec 05 '22 at 09:17

score 1 · Answer 1 · answered Dec 04 '22 at 00:06

1

You can use the bootstrap class ml-x (x select a value of choice for your spacing) to increase spacing between buttons. For example ml-2:

<button type="button" id="registerTrigger" class="btn btn-primary navbar-btn ml-2">
            Register
</button>

I modified your html with that (expand viewport to make it look like in your screenshot): https://jsfiddle.net/aeo3v29w/

For more information check out this post: Does bootstrap have builtin padding and margin classes?

answered Dec 04 '22 at 00:06

Felix Schildmann

574
1
7
22

I tried to do that again, but it still doesn't work. - I edited my question with what you told me. I get the same results. It is weird, because when i click the jsfiddle that you sent me it looks fine on there, but for some reason it is still the same for me. – Avi Ball Dec 04 '22 at 18:06
Please share the actual html by opening your page and pressing F12. Then copy it. Not the source code from your project – Felix Schildmann Dec 05 '22 at 19:19
Ok! I reupdated my question. – Avi Ball Dec 07 '22 at 01:45
There are no buttons in your updated html code – Felix Schildmann Dec 07 '22 at 09:11
Rip i updated the wrong thing. I fixed it in my updated html code. – Avi Ball Dec 07 '22 at 22:51
I pasted your html into a jsfiddle and the buttons have spacings: https://jsfiddle.net/c3ubfeht/ . Do you have any other styles that could overwrite the bootstrap styles? – Felix Schildmann Dec 08 '22 at 17:17

How to fix bootstrap navbar button spacing?

1 Answers1