Question 405706 in Html Question posted in
Some basic documentation can be found here.

Html – How to add space between two buttons?

In my homepage header, I have a login and register button. Currently, there is no space between these two buttons in wide screen. In smaller screen, I made it to collapse, and there is space.

How do I keep the space regardless of the screen size?

I’ve tried to add mb-2 in the li and ul tags, but it only works when they collapse.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a href="home" class="navbar-brand">
          <img class="img-responsive" src="/image/logo.png" alt="Logo" />
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item mb-2">
              <button type="button" class="btn btn-outline-primary btn-sm" mr-1 href="#">
                  Register
                </button>
            </li>
            <li class="nav-item mb-2">
              <button type="button" class="btn btn-primary btn-sm" href="#">
                  Log in
                </button>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
          </form>
        </div>
      </div>
    </nav>
  </header>
</body>

</html>
Tags:

3

Answers


  1. 0

    The navbar in Bootstrap uses Flexbox. The direction is controlled through flex-direction.
    Having that in mind you could know, that you should not add margin to space the list items apart. Instead, use the gap property on the list container.

    1. remove mb-2 from the <li>
    2. add gap-2 to the <ul>
    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</head>

<body>
  <header>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
        <a href="home" class="navbar-brand">
          <img class="img-responsive" src="/image/logo.png" alt="Logo" />
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0 gap-2">
            <li class="nav-item">
              <button type="button" class="btn btn-outline-primary btn-sm" href="#">
                  Register
                </button>
            </li>
            <li class="nav-item">
              <button type="button" class="btn btn-primary btn-sm" href="#">
                  Log in
                </button>
            </li>
          </ul>
          <form class="d-flex">
            <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
          </form>
        </div>
      </div>
    </nav>
  </header>
</body>

</html>
    Login or Signup to reply.
  2. 0

    You have defined mr-1 outside the class definition for the first button. This should be me-1 inside the class definition.
    You can find more information here.

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<header>
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container">
      <a href="home" class="navbar-brand">
        <img class="img-responsive" src="/image/logo.png" alt="Logo" />
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item mb-2">
            <button type="button" class="btn btn-outline-primary btn-sm me-1" href="#">
                  Register
                </button>
          </li>
          <li class="nav-item mb-2">
            <button type="button" class="btn btn-primary btn-sm" href="#">
                  Log in
                </button>
          </li>
        </ul>
        <form class="d-flex">
          <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
        </form>
      </div>
    </div>
  </nav>
</header>
    Login or Signup to reply.
  3. 0

    Add the me-2 (margin-end) class to the "Register" button. This will create space on the right side of the "Register" button, which effectively pushes the "Log in" button away from it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search