Button group as in bootstrap css

Question

I need to create a btn group class very similar to bootstrap css. I created it but i couldnt fill the gap between buttons and couldnt map the reason between the buttons.

https://jsfiddle.net/frcbn82p/

You could actually notice a small gap between the buttons. How can i remove that.

My css is

    .btn-group{
  display:inline-block;
}
.btn-group button{
  width:auto;

  height:40px;
  border:none;
  background-color:#4444ee;
  color:#fff;
}

Answer 1

Its HTML white-space problem on display: inline-block; elements so one option is to remove space in HTML code. Or you can set font-size: 0 on parent and then again change it on child Demo. Or you can use comments in HTML Demo. Or you can just use display: flex; Demo

.btn-group{
  display:inline-block;
}

.btn-group button{
  width:auto;
  height:40px;
  border:none;
  background-color:#4444ee;
  color:#fff;
}

<div class="btn-group">
  <button>Hello World</button><button>Hello World</button>
</div>