How to make space (padding) between buttons equal

Question

i am using bootstrap to place each button in a col-md-1 to make some space between them, but i am not getting even space between the button, is there any more simple way to do it. This is my code:

   <div class = "header">
   <div class="container">
   <div class="row">
   <!-- Start Menu -->
   <!-- HOME -->
   <div class="col-md-1">
               <div class="menu">
                  <a href="#"><button class = "dropbtn">Home</button></a>             
              </div>
   </div>
   <!-- MENU -->
   <div class="col-md-1">
               <div class="dropdown">
                  <button onclick="myFunction()" class="dropbtn">Menu</button>
                  <div id="myDropdown" class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2</a>
                    <a href="#">Link 3</a>
                  </div>
              </div>
   </div>

  <!-- CATERING -->         
     <div class="col-md-1">
       <div class="menu">
          <a href="#"><button class = "dropbtn">Catering</button></a>             
       </div>
     </div>

  <!-- Place Order -->         
     <div class="col-md-1">
       <div class="menu">
          <a href="#"><button class = "dropbtn">Order</button></a>             
       </div>
     </div>

     <!-- Gallery -->         
     <div class="col-md-1">
       <div class="menu">
          <a href="#"><button class = "dropbtn">Gallery</button></a>             
       </div>
     </div>

      <!-- Contact -->         
     <div class="col-md-1">
       <div class="menu">
          <a href="#"><button class = "dropbtn">Contact</button></a>             
       </div>
     </div>
   <!-- End Menu -->
   </div>
   </div>

and my css code is:

/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
text-align:center;
padding-top: 10px;
padding-bottom:10px;
padding-left:20px;
padding-right:20px;
font-size: 16px;
border: #00ffff;
border-style: solid;
border-width: 2px;
cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: Transparent;  /* Transparent here */
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}




/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: Transparent;
background-color: Transparent;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropbtn{
background-color: Transparent;
}

/* Links inside the dropdown */
.dropdown-content a {

color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content                                               
.show {display:block;}`


[Please view Image for more info][1]

Answer 1

First thing I notice is that you are missing .container-fluid and .row containers. Keep in mind with Bootstraps you have to nest your all your .col-1 inside .container-fluid and .row classes like this:

<div class="container" style="border:1px solid #000">
    <div class="row">
        <!-- Start Menu -->
        <!-- HOME -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">home</button></a>
            </div>
        </div>
        <!-- MENU -->
        <div class="col-md-2">

            <button onclick="myFunction()" class="dropbtn btn-block">Menu</button>
            <div id="myDropdown" class="dropdown-content">
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
            </div>

        </div>
        <!-- CATERING -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">Catering</button></a>
            </div>
        </div>
        <!-- Place Order -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">Order</button></a>
            </div>
        </div>
        <!-- Gallery -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">Gallery</button></a>
            </div>
        </div>
        <!-- Contact -->
        <div class="col-md-2">
            <div class="menu">
                <a href="#"><button class="dropbtn btn-block">Contact</button></a>
            </div>
        </div>
        <!-- End Menu -->
    </div>
</div>

But at medium breakpoints with .col-1 I suspect your buttons are going to disappear somewhat when the user views this on smaller screens. There are 6 menu items so I would change your buttons to .col-md-2 so the 6 buttons divide equally 12 across. Now to get the buttons to space evenly add an extra class to your button - "btn-block. Bootstraps also comes with its own button classes too that have the proper spacing and padding. The bootstraps site has really good documentation on its grid system.

Cheers!