10 Useful Bootstrap Tricks

Bootstrap 3.1 and jQuery Snippets

• Shake Button

  Click to make it say no

  Click Me
• Progress Bar

  A working jQuery example
• Switch Button

  Toggle off and on state

  ON OFF
• Pagination

  Paging for sections or paragraphs

  Page 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.

  Page 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.

  Page 3 - More m ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.

  Page 4 - Final ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.
• Select Button

  Turn a Dropdown into a select list

  Select an Item

  • Item I
  • Item II
  • Item III
  • Item IV
  • Item V
  • Other
• Expanding Input (CSS only)

  Grows wider when clicked

• Pop-up Email Validation

  Live as-you-type validator
• Caps Lock Check

  As-you-type for case sensitive passwords
• Collapse Tabs

  Overflow extra tabs into a Dropdown

  • Tab0
  • Tab1
  • Tab2
  • Tab3
  • Tab4
  • Tab5
  • Tab6
  • Tab7
  • Tab8
  • More

  Tab 0 content...

  Tab 1 content...

  Tab 2 content...

  Tab 3 content...

  Tab 4 content...

  Tab 5 content...

  Tab 6 content...

  Tab 7 content...

  Tab 8 content...
• Loading Button

  Add state to your buttons

  Click Me