how to make space between two bootstrap button

Question

You can see the below code I'm trying to create two buttons in same line but its not work I want to make two button in same line in this code

 <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success"  onClick={() => this._filterByYear('2006')}>2006</button>
    <button class="btn btn-success"  onClick={() => this._filterByYear('2007')}>2007</button>
  </div>
  </div>
  <div class="w3-show-inline-block">
  <div class="w3-bar">
    <button class="btn btn-success"  onClick={() => this._filterByYear('2008')}>2008</button>
    <button class="btn btn-success"  onClick={() => this._filterByYear('2009')}>2009</button>

In demo code here why no space between two button i want like this https://ibb.co/rFD6knk

Demo

Answer 1

Add this CSS :

button {
    margin-left: 10px;
    margin-top: 10px;
    background: white;
    padding: 10px 20px;
    border: none;
}

Here margin-left will give you the space between two , I have added more styling option here which will help you.

The margin-left and margin-top gives space, the background changes the background of the button, the padding adds space inside the button, and border gets rid of the default border.