bootstrap user interface

Badges

Badges are numerical indicators of how many items are associated with a link. Use the badge class within <span> elements to create badges.

  <a href="#">Comments <span class="badge">10</span></a>

Comments 10

Badges can also be used inside other elements, such as buttons.

  <button type="button" class="btn btn-primary">Primary <span class="badge">7</span></button>

Notifications 7

Labels

Labels are used to provide additional information about something. Use the label class, followed by one of the six contextual classes label-default, label-primary, label-success, label-info, label-warning or label-danger, within a <span> element to create a label.

  <h4>Example <span class="label label-default">New</span></h4>

Example New

Buttons

To achieve the button styles, add btn class followed by one of the contextual class btn-default, btn-primary, btn-success, btn-info, btn-warning, btn-danger.

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

Result:

Basic Default Primary Success Info Warning Danger

The btn class can be used on an <a> or <input> element too. Bootstrap provides four button sizes defined as btn-lg, btn-md, btn-sm and btn-xs.

  <a href="#" class="btn btn-lg btn-info" role="button">Link Button</a>
  <input type="submit" class="btn btn-xs btn-primary" value="Submit Button">

Lg Button

Button Groups

Bootstrap allows you to group a series of buttons together on a single line in a button group. Use a <div> element with class .btn-group to create a button group.

      <div class="btn-group">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">Samsung</button>
      <button type="button" class="btn btn-primary">Sony</button>
      </div>
    

Instead of applying button sizes to every button in a group, use class btn-group-lg or sm or xs in the container <div> to size all buttons in the group.

      <div class="btn-group btn-group-lg">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">Samsung</button>
      <button type="button" class="btn btn-primary">Sony</button>
      </div>
    

Use the class btn-group-vertical to create a vertical button group.

      <div class="btn-group-vertical">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">Samsung</button>
      <button type="button" class="btn btn-primary">Sony</button>
      </div>
    

To span the entire width of the screen, add the btn-group-justified class to the container <div>.

      <div class="btn-group btn-group-justified">
      <button type="button" class="btn btn-primary">Apple</button>
      <button type="button" class="btn btn-primary">Samsung</button>
      <button type="button" class="btn btn-primary">Sony</button>
      </div>
    

Progress Bar

Bootstrap provides several types of progress bars. To create a default progress bar, add a progress class to a <div> element:

      <div class="progress">
      <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
      70% Complete
      </div>
      </div>  
    

The contextual classes that can be used with progress bars are progress-bar-success, progress-bar-info, progress-bar-warning and progress-bar-danger. Add class progress-bar-striped to add stripes to the progress bars

    <div class="progress">
    <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
    style="width:70%">
    70% Complete
    </div>
    </div>  
  

Add class active to animate the progress bar

  <div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="70" aria-valuemin="0" 
  aria-valuemax="100" style="width:70%">
  70% Complete
  </div>
  </div>  

Progress bars can also be stacked by placing multiple bars into the same <div>

  <div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" style="width:40%">
  Free Space
  </div>
  <div class="progress-bar progress-bar-warning" role="progressbar" style="width:10%">
  Warning
  </div>
  <div class="progress-bar progress-bar-danger" role="progressbar" style="width:20%">
  Danger
  </div>
  </div>

---

0 Like 0 Dislike 0 Comment Share Tweet