Outlined buttons have the same appearance on :active and :focus states

[TiGR]

Slightly modified example from the docs:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary-outline">
    <input type="checkbox" checked="" autocomplete="off"> Checkbox 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
</div>

Once you clicked the button you can't say what is its state actually until you move your mouse pointer away (or on mobile devices - tap outside of the buttons area). So, if user have tapped some checkbox he can't really say what state is it in.

Compare this behavior with not outilined buttons.

[patrickhlauke]

I'm assuming you mean in v4 ?

[TiGR]

Yep, there are no outlined buttons in v3

[patrickhlauke]

btw note that in your example code btn-primary-outline should be btn-outline-primary

[TiGR]

My code was based on docs, it seems that outline buttons docs need to be updated.

[patrickhlauke]

i need to stop looking at the out-of-sync v4-alpha site, as it seems the naming was swapped at some point. i'll make a note to check/update the docs if needed.

[patrickhlauke]

just to confirm that the docs in the latest version here are up-to-date. it's just http://v4-alpha.getbootstrap.com that is quite a few commits behind.

[TiGR]

@patrickhlauke I've checked the actual docs. See pull request.