Buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <button> tag.

        
          <button type="button" class="btn btn-default">
            <!-- Insert text here -->
          </button>
        
      

Icon buttons comprise of a surround, an icon (see Icons) and 2 styles, toggled by an optional attribute. The attribute appears in the opening <button> tag.

        
          <button type="button" class="btn btn-default btn-icon">
            <!-- Insert icon here -->
          </button>
        
      

These buttons comprise of a surround, text, an icon (see Icons) and 2 styles, toggled by an optional attribute. The attribute appears in the opening <button> tag.

        
          <button type="button" class="btn btn-default btn-with-icon">
            <!-- Insert text here -->
            <span class="fa fa-search"></span>
          </button>
        
      

Text buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <button> tag.

        
          <button type="button" class="btn btn-text">
            <!-- Insert text here -->
          </button>
        
      

Arrow buttons comprise of a surround and 2 styles, toggled by an optional attribute. The attribute appears in the opening <button> tag.

        
          <button type="button" class="btn btn-arrow" disabled="disabled"></button>
        
      

Multi-action buttons comprise of a surround, a list of standard buttons and 2 styles, toggled by an optional attribute. The attribute appears in both the first and second opening <button> tags. The lack of whitespace between the closing of the first button tag and the entirity of the second button is necessary to maintain the integrity of the button across all supported browsers.

        
          <div class="btn-group btn-dropdown">
            <button type="button" class="btn btn-default">
              <!-- Insert text here -->
            </button><button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="fa fa-chevron-down"></span></button>
            <ul class="dropdown-menu" role="menu">
              <li>
                <button type="button" class="btn">
                  <!-- Insert text here -->
                </button>
              </li>
              <li>
                <button type="button" class="btn">
                  <!-- Insert text here -->
                </button>
              </li>
            </ul>
          </div>
        
      

Group a series of buttons together on a single line with the button group

        
      <!-- Button Group -->
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default">Right</button>
      </div>

      <!-- Button group with a disabled button -->
      <div class="btn-group" role="group">
        <button type="button" class="btn btn-default">Left</button>
        <button type="button" class="btn btn-default">Middle</button>
        <button type="button" class="btn btn-default" disabled="disabled">Right</button>
      </div>