Bootstrap CSS Space Between Buttons in Navbar

Bootstrap CSS space between buttons in navbar

you may try margin-left

here is the code

.btn{
margin-left:10px;
}

here is the example:: FIDDLE

Bootstrap distance between buttons in navbar

Setting margin between elements

.navbar-nav li{
  margin-right: 10px;
  display: inline-block;
}
.navbar-nav li:last-child(){
  margin-right: 0px;
}

You can change the number of pixels as you wish.

Use !important if style were not overridden.

Changing the space between each item in Bootstrap navbar

You can change this in your CSS with the property padding:

.navbar-nav > li{
  padding-left:30px;
  padding-right:30px;
}

Also you can set margin

.navbar-nav > li{
  margin-left:30px;
  margin-right:30px;
}

How to add space between the Bootstrap 4 navbar links?

Add this css to the code

.nav-item {
 margin-right: 20px;
 }

How can I add space to each button in bootstrap navbar

To space elements we add margin between them. We'll do it only when navbar is horizontal so to not affect mobile menu. (We also add some bottom margin to space them for mobile)

@media (min-width: 992px) {
  .navbar-nav li {
    margin-left: 5px;
  }
}

  .navbar-nav li {
    margin-bottom: 5px;
  }

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light shadow-sm bg-body">
  <div class="container">
    <a class="navbar-brand" href="">
      <h3>Brand</h3>
    </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 ms-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="btn btn-primary shadow-sm" aria-current="page" href="{% url 'About' %}">About</a></li>
        <li class="nav-item"><a class="btn btn-primary shadow-sm" href="{% url 'login' %}">Log in</a></li>
        <li class="nav-item"><a class="btn btn-primary shadow-sm" href="{% url 'register' %}">Sign Up</a></li>
      </ul>
    </div>
  </div>

How to decrease the space between the items in a Bootstrap navbar without changing the padding in .nav li a in bootstrap.css directly?

Add your own style after boostrap css files:

.nav > li > a {
    padding: 40px;
}

<!DOCTYPE html>    <html >    <head>    <title>Home</title>    <meta charset="utf-8">    <meta name="viewport" content="width=device-width,initial-scale=1.0">    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">    <style>       .nav > li > a {        padding: 40px;      }    </style>    </head>    <body>    <nav class="navbar navbar-default">      <div class="container-fluid custom-coontainer-fluid">        <div class="navbar-header ">          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#my-navbar" aria-expanded="false">            <span class="sr-only">Toggle navigation</span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>            <span class="icon-bar"></span>          </button>        </div>            <div class="collapse navbar-collapse" id="my-navbar">          <ul class="nav navbar-nav">                <li class="active"><a href="#" class="custom-menu-item">Home <span class="sr-only">(current)</span></a></li>            <li class="dropdown">            <a class="dropdown-toggle custom-menu-item" data-toggle="dropdown" id="about-us-menu" href="#" role="button" aria-haspopup="true" aria-expanded="false">About  Us <span class="caret"></span></a>               <ul class="dropdown-menu" role="menu" aria-labelledby="about-us-menu">                <li><a href="#">Action</a></li>                <li><a href="#">Another action</a></li>                <li><a href="#">Something else here</a></li>                <li role="separator" class="divider"></li>                <li><a href="#">Separated link</a></li>               </ul>            </li>                <li class="dropdown ">            <a class="dropdown-toggle custom-menu-item" data-toggle="dropdown" id="admin-info-menu" href="#" role="button" aria-haspopup="true" aria-expanded="false">Administration  <span class="caret"></span></a>               <ul class="dropdown-menu" role="menu" aria-labelledby="admin-info-menu">               <li><a href="#">Action</a></li>                <li><a href="#">Another action</a></li>                <li><a href="#">Something else here</a></li>                <li role="separator" class="divider"></li>                <li><a href="#">Separated link</a></li>               </ul>            </li>              </ul>        </div>      </div>    </nav>    </body>    </html>

How to add space inbetween nav items in bootstrap

To separate two navbar areas in bootstrap4, I used this:

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="/">
        <img src="logo.png" width="192" height="44" alt="Sample Image">
        Bootstrap Navbar Demo
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
        <div class="navbar-nav mr-auto">
          <a class="nav-item nav-link mx-3 active" href="/page1">Page 1</a>
          <a class="nav-item nav-link mx-3" href="/page2">Page 2</a>
          <a class="nav-item nav-link mx-3" href="/page2">Page 3</a>
        </div>
        <div class="navbar-nav">
          <a class="nav-item nav-link mx-3" href="/logout">Logout</a>
        </div>
      </div>
    </nav>

Basically the buttons have margins of mx-3 to separate them a bit. The mr-auto pushes the logout button to far right.

With https://stackoverflow.com/a/18600623/999943 this is pretty nice.

Hope that helps.

Bootstrap responsive space between navbar items

As you will see in the Bootstrap docs, the spacing utility classes (padding and margins) are responsive. For example...

px-lg-5 px-sm-3 px-1

responsively applies padding according to screen width...

large and up, 5 left/right padding units
sm and md, 3 left/right padding units
xs, 1 left/right padding unit

Therefore the same can be done with the nav-items...

<ul class="navbar-nav">
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Profile</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Statistics</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Polls</button>
    </li>
    <li class="nav-item px-lg-5 px-sm-3 px-1">
        <button class="nav-link" href="#">Settings</button>
    </li>
</ul>

Of course, you can change the p-{breakpoint}-{value} according to your needs.

Demo

Bootstrap CSS Space Between Buttons in Navbar