<div class="btn-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>

Standard button

 Standard button
<button type="button" class="btn btn-default">Default</button>

Provides extra visual weight and identifies the primary action in a set of buttons
<button type="button" class="btn btn-primary">Primary</button>

Indicates a successful or positive action
<button type="button" class="btn btn-success">Success</button>

Contextual button for informational alert messages
<button type="button" class="btn btn-info">Info</button>

Indicates caution should be taken with this action
<button type="button" class="btn btn-warning">Warning</button>

Indicates a dangerous or potentially negative action
<button type="button" class="btn btn-danger">Danger</button>

Large button

  <button type="button" class="btn btn-default btn-lg">Default button</button>
  <button type="button" class="btn btn-primary btn-lg">Primary button</button>
  <button type="button" class="btn btn-primary btn-lg btn-success">Success button</button>
  <button type="button" class="btn btn-primary btn-lg btn-info">Info button</button>
  <button type="button" class="btn btn-primary btn-lg btn-warning">Warning button</button>
  <button type="button" class="btn btn-primary btn-lg btn-danger">Danger button</button>

Button

  <button type="button" class="btn btn-default">Default button</button>
  <button type="button" class="btn btn-primary">Primary button</button>
  <button type="button" class="btn btn-primary btn-success">Success button</button>
  <button type="button" class="btn btn-primary btn-info">Info button</button>
  <button type="button" class="btn btn-primary btn-warning">Warning button</button>
  <button type="button" class="btn btn-primary btn-danger">Danger button</button>

Small button

  <button type="button" class="btn btn-default btn-sm">Default button</button>
  <button type="button" class="btn btn-primary btn-sm">Primary button</button>
  <button type="button" class="btn btn-primary btn-sm btn-success">Success button</button>
  <button type="button" class="btn btn-primary btn-sm btn-info">Info button</button>
  <button type="button" class="btn btn-primary btn-sm btn-warning">Warning button</button>
  <button type="button" class="btn btn-primary btn-sm btn-danger">Danger button</button> 

Mini button

  <button type="button" class="btn btn-default btn-xs">Default button</button>
  <button type="button" class="btn btn-primary btn-xs">Primary button</button>
  <button type="button" class="btn btn-primary btn-xs btn-succes">Success button</button>
  <button type="button" class="btn btn-primary btn-xs btn-info">Info button</button>
  <button type="button" class="btn btn-primary btn-xs btn-warning">Warning button</button>
  <button type="button" class="btn btn-primary btn-xs btn-danger">Danger button</button>

Nested button groups

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li>>a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>


Single button dropdowns

 
 <div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
 </div>

Split button dropdowns


<div class="btn-group">
  <button type="button" class="btn btn-default">Action</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li>><a href="#">Separated link</a></li>
  </ul>
</div>

Dropup buttons

<div class="btn-group dropup">
<button type="button" class="btn btn-default">Dropup</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>

Buttons instead of text

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
      </span>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
      </span>
    </div>
 </div>
</div>

Buttons with dropdowns

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
      <input type="text" class="form-control">
    </div>
  </div>
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu pull-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Contact Us

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 

+0085004786

 

UK. London. Queen av. 12

 

GymHall@mail.ru

Send Message