.btn はボタンを示します。.btn-* でボタンの種類を指定します。Bootstrap 3 の .btn-default は .btn-secondary に名称変更されました。

<button type="button" class="btn">Button</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button> 
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>

.btn は <button>, <input>, <a> タグに使用することができます。<a> に使用する場合は、role="button" を指定するのが望ましいです。

<a class="btn btn-primary" href="#" role="button">Link</a>
<button type="submit" class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input">
<input type="submit" class="btn btn-primary" value="Submit">
<input type="reset" class="btn btn-primary" value="Reset">

.btn-outline-* は、アウトラインボタンを表示します。

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

.btn-lg, .btn-sm でボタンの大きさを指定します。Bootstrap 3 の .btn-xs は廃止されました。

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>

.btn-block は、横幅いっぱいのブロックレベルボタンを表示します。

<button class="btn btn-primary btn-block">Block evel button</button>

フォーカスがあたったボタンには .active が適用されます。

<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary active">Active</button>

ボタンに disabled 属性を指定すると、無効化されたボタンとなります。

<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary" disabled>Disabled</button>

data-toggle="button" を指定すると、トグルボタンを作成することができます。トグルボタンは、クリック後にボタンからマウスを離してもアクティブな状態が維持され、ボタンの色が濃いままとなります。周りに薄い枠が付くのはアクティブ状態ではなく、フォーカス状態です。アクティブな状態では active クラスと aria-pressed="true" 属性が追加されます。Firefox でリロード後も状態が維持されてしまうのを回避するため、Firefox 独自属性ですが autocomplete="off" を指定しています。

<button class="btn btn-primary">No Toggle</button>
<button class="btn btn-primary" data-toggle="button" aria-pressed="false" autocomplete="off">Toggle</button>

.btn-group は、ボタングループを表示します。音声読み上げブラウザなどのために、ボタングループには role="group" と aria-label="..." をつけるのが望ましいです。

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">A</button>
  <button type="button" class="btn btn-secondary">B</button>
  <button type="button" class="btn btn-secondary">C</button>
</div>

.btn-group-lg は大きなボタングループ、.btn-group-sm は小さなボタングループを表示します。

<div class="btn-group btn-group-lg">
  :
</div>
<div class="btn-group">
  :
</div>
<div class="btn-group btn-group-sm">
  :
</div>

.btn-group-vertical は、縦に並ぶボタンを表示します。

<div class="btn-group-vertical">
  <button type="button" class="btn btn-secondary">A</button>
  <button type="button" class="btn btn-secondary">B</button>
  <button type="button" class="btn btn-secondary">C</button>
</div>

<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
  <button type="button" class="btn btn-secondary">1</button>
  <button type="button" class="btn btn-secondary">2</button>
  <div class="btn-group" role="group">
    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
      <a class="dropdown-item" href="#">Dropdown link</a>
      <a class="dropdown-item" href="#">Dropdown link</a>
    </div>
  </div>
</div>

チェックボックスをボタンにするには、下記の様にラベルに .btn を使用し、全体を .btn-group, .btn-group-toggle クラスと data-toggle="buttons" 属性で囲んでください。チェック状態のボタンは少し色が濃くなります。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off">CheckboxA
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off">CheckboxB
  </label>
</div>

チェックボックスと同様にラジオボタンを表示します。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked>RadioA
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off">RadioB
  </label>
</div>

.btn-toolbar は、ボタンツールバーを表示します。音声読み上げブラウザなどのために、ボタンツールバーには role="toolbar" と aria-label="..." をつけるのが望ましいです。

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar">
  <div class="btn-group mr-2" role="group" aria-label="First group">
    <button type="button" class="btn btn-secondary">A</button>
    <button type="button" class="btn btn-secondary">B</button>
    <button type="button" class="btn btn-secondary">C</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-secondary">X</button>
    <button type="button" class="btn btn-secondary">Y</button>
    <button type="button" class="btn btn-secondary">Z</button>
  </div>
</div>