2.9 Bootstrap helper classes

---

Bootstrap helper classes

Some helper classes in Bootstrap that might come in handy are discussed below.

text

The following different classes exhibit different text colors. If the text is a link, it will be dimmed when the mouse moves over the text:

kind	describe
.text-muted	Text styles with class "text-muted"
.text-primary	Text styles with class "text-primary"
.text-success	Text styles with class "text-success"
.text-info	Text styles with class "text-info"
.text-warning	Text styles with class "text-warning"
.text-danger	Text styles with class "text-danger"

background

The different classes below exhibit different background colors. If the text is a link, it will be dimmed when the mouse moves over the text:

kind	describe
.bg-primary	Table cells use the "bg-primary" class
.bg-success	Table cells use the "bg-success" class
.bg-info	Table cells use the "bg-info" class
.bg-warning	Table cells use the "bg-warning" class
.bg-danger	Table cells use the "bg-danger" class

other

kind	describe
.pull-left	element floats to the left
.pull-right	element floats to the right
.center-block	Set the element to display:block and center it
.clearfix	clear float
.show	Mandatory element display
.hidden	force element to hide
.sr-only	Hide elements on devices other than screen readers
.sr-only-focusable	Used in conjunction with the .sr-only class, it is shown when the element gets focus (for example: keyboard-operated users)
.text-hide	Replace the text content contained in the page element with the background image
.close	show close button
.caret	Show dropdown functionality

more examples

close icon

Use the generic close icon to close modals and alerts. Use class close to get the close icon.

<p>关闭图标实例
  <button type="button" class="close" aria-hidden="true">
    &times;
  </button>
</p>

caret

Use a caret to indicate drop-down functionality and direction. Use a <span> element with class caret to get this functionality.

<p>插入符实例
  <span class="caret"></span>
</p>

fast float

You can float elements to the left or right using the class pull-left or pull-right respectively. The following example demonstrates this.

<div class="pull-left">
  向左快速浮动
</div>
<div class="pull-right">
  向右快速浮动
</div>

To align components in the navbar, use .navbar-left or .navbar-right instead. Check out Bootstrap Navbar.

content centered

Use class center-block to center elements.

<div class="row">
  <div class="center-block" style="width:200px;background-color:#ccc;">
    这是 center-block 实例
  </div>
</div>

clear float

To clear the float of an element, use the .clearfix class.

<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
  <div class="pull-left" style="background:#58D3F7;">
    向左快速浮动
  </div>
  <div class="pull-right" style="background: #DA81F5;">
    向右快速浮动
  </div>
</div>

Show and hide content

You can force an element to show or hide (including for screen readers) by using the classes .show and .hidden.

<div class="row" style="padding: 91px 100px 19px 50px;">
  <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
    这是 show class 的实例
  </div>
  <div class="hidden" style="width:200px;background-color:#ccc;">
    这是 hide class 的实例
  </div>
</div>

screen reader

You can hide an element from all devices except screen readers by using the class .sr-only.

<div class="row" style="padding: 91px 100px 19px 50px;">
  <form class="form-inline" role="form">
    <div class="form-group">
      <label class="sr-only" for="email">Email 地址</label>
      <input type="email" class="form-control" placeholder="Enter email">
    </div>
    <div class="form-group">
      <label class="sr-only" for="pass">密码</label>
      <input type="password" class="form-control" placeholder="Password">
    </div>
  </form>
</div>

Here we see that both input type labels have class sr-only, so the labels will only be visible to screen readers.