How to remove focus around button click in Bootstrap

Way 1: use CSS

.btn:focus {
  outline: none;
}

Way 2:
I've noticed the same and even though it really annoys me, I believe there is no proper way of handling this.

I would recommend against all the other solutions given because they kill the accessibility of the button completely, so now, when you tab to the button, you won't get the expected focus.
This should be avoided!

.btn:focus {
  outline: none;
}

Way 3: use HTML in bootstrap

<button class="btn btn-primary btn-block" onclick="this.blur();">...

Way 4: CSS

.not-focusable:focus {
    outline: none;
    box-shadow: none;
}

call class not-focusable

<button class="btn btn-primary not-focusable">My Button</button>

Way 5: Can't believe nobody has posted this yet.
Use a label instead of a button.

<label type="button" class="btn btn-primary btn-block">
<span class="icon-plus"></span> Add Page
</label>

Way 6: Try this solution for remove border around the button. Add this code in css.

button:focus{
outline:0px;
}
button:focus{
 outline:none !important;
 }

 Way 7: This worked for me. I created a custom class which overrides the necessary CSS.

 .custom-button:focus {
    outline: none !important;
    border: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}