Bootstrap Example

A Full Featured Example

h1. Bootstrap 3

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Bootstrap Framework

In simple terms, a responsive web design figures out what resolution of device it's being served on. Flexible grids then size correctly to fit the screen.

The new Bootstrap 3 promises to be a smaller build. The separate Bootstrap base and responsive.css files have now been merged into one. There is no more fixed grid, only fluid.


Have you ever had a project where you thought it would be so much better to just throw everything out and start over? I believe that’s what’s happening with BS3.

Quasipickle

col-lg-12

col-lg-4

col-lg-4

col-lg-4

col-lg-6

col-lg-6

col-lg-9 / col-sm-6
col-lg-3 / col-sm-6

Button Sizes (4)

Button Classes

  • glyphicon-glass
  • glyphicon-music
  • glyphicon-search
  • glyphicon-envelope
  • glyphicon-heart
  • glyphicon-star
  • glyphicon-star-empty
  • glyphicon-user
  • glyphicon-film
  • glyphicon-th-large
  • glyphicon-th
  • glyphicon-th-list
  • glyphicon-ok
  • glyphicon-remove
  • glyphicon-zoom-in
  • glyphicon-zoom-out
  • glyphicon-off
  • glyphicon-signal
  • glyphicon-cog
  • glyphicon-trash
  • glyphicon-home
  • glyphicon-file
  • glyphicon-time
  • glyphicon-road
  • glyphicon-download-alt
  • glyphicon-download
  • glyphicon-upload
  • glyphicon-inbox
  • glyphicon-play-circle
  • glyphicon-repeat
  • glyphicon-refresh
  • glyphicon-list-alt
  • glyphicon-lock
  • glyphicon-flag
  • glyphicon-headphones
  • glyphicon-volume-off
  • glyphicon-volume-down
  • glyphicon-volume-up
  • glyphicon-qrcode
  • glyphicon-barcode
  • glyphicon-tag
  • glyphicon-tags
  • glyphicon-book
  • glyphicon-bookmark
  • glyphicon-print
  • glyphicon-camera
  • glyphicon-font
  • glyphicon-bold
  • glyphicon-italic
  • glyphicon-text-height
  • glyphicon-text-width
  • glyphicon-align-left
  • glyphicon-align-center
  • glyphicon-align-right
  • glyphicon-align-justify
  • glyphicon-list
  • glyphicon-indent-left
  • glyphicon-indent-right
  • glyphicon-facetime-video
  • glyphicon-picture
  • glyphicon-pencil
  • glyphicon-map-marker
  • glyphicon-adjust
  • glyphicon-tint
  • glyphicon-edit
  • glyphicon-share
  • glyphicon-check
  • glyphicon-move
  • glyphicon-step-backward
  • glyphicon-fast-backward
  • glyphicon-backward
  • glyphicon-play
  • glyphicon-pause
  • glyphicon-stop
  • glyphicon-forward
  • glyphicon-fast-forward
  • glyphicon-step-forward
  • glyphicon-eject
  • glyphicon-chevron-left
  • glyphicon-chevron-right
  • glyphicon-plus-sign
  • glyphicon-minus-sign
  • glyphicon-remove-sign
  • glyphicon-ok-sign
  • glyphicon-question-sign
  • glyphicon-info-sign
  • glyphicon-screenshot
  • glyphicon-remove-circle
  • glyphicon-ok-circle
  • glyphicon-ban-circle
  • glyphicon-arrow-left
  • glyphicon-arrow-right
  • glyphicon-arrow-up
  • glyphicon-arrow-down
  • glyphicon-share-alt
  • glyphicon-resize-full
  • glyphicon-resize-small
  • glyphicon-plus
  • glyphicon-minus
  • glyphicon-asterisk
  • glyphicon-exclamation-sign
  • glyphicon-gift
  • glyphicon-leaf
  • glyphicon-fire
  • glyphicon-eye-open
  • glyphicon-eye-close
  • glyphicon-warning-sign
  • glyphicon-plane
  • glyphicon-calendar
  • glyphicon-random
  • glyphicon-comment
  • glyphicon-magnet
  • glyphicon-chevron-up
  • glyphicon-chevron-down
  • glyphicon-retweet
  • glyphicon-shopping-cart
  • glyphicon-folder-close
  • glyphicon-folder-open
  • glyphicon-resize-vertical
  • glyphicon-resize-horizontal
  • glyphicon-hdd
  • glyphicon-bullhorn
  • glyphicon-bell
  • glyphicon-certificate
  • glyphicon-thumbs-up
  • glyphicon-thumbs-down
  • glyphicon-hand-right
  • glyphicon-hand-left
  • glyphicon-hand-up
  • glyphicon-hand-down
  • glyphicon-dashboard
  • glyphicon-paperclip
  • glyphicon-heart-empty
  • glyphicon-link
  • glyphicon-phone
  • glyphicon-pushpin
  • glyphicon-euro
  • glyphicon-usd
  • glyphicon-gbp
  • glyphicon-sort
  • glyphicon-sort-by-alphabet
  • glyphicon-sort-by-alphabet-alt
  • glyphicon-sort-by-order
  • glyphicon-sort-by-order-alt
  • glyphicon-sort-by-attributes
  • glyphicon-sort-by-attributes-alt
  • glyphicon-unchecked
  • glyphicon-expand
  • glyphicon-circle-arrow-right
  • glyphicon-circle-arrow-left
  • glyphicon-circle-arrow-up
  • glyphicon-circle-arrow-down
  • glyphicon-globe
  • glyphicon-wrench
  • glyphicon-tasks
  • glyphicon-filter
  • glyphicon-briefcase
  • glyphicon-fullscreen

Form Inline

Form Horizontal

Bootstrap 3 Inputs

In addition to freeform text, any HTML5 text-based input appears like so.

Something may have gone wrong

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Pagination

Tabs

I'm in Section A.

Howdy, I'm in Section B.

What up girl, this is Section C.

Labels

Default Success Warning Danger Info

Badges

Default

Progress bars



Bootstrap 3 Panels

Panel heading
Hello. This is the Panel content.
Panel primary
Panels are new in BS3.
Panel success
You can use contextual classes.

Bootstrap 3 List Groups

  • List item 1
  • List item 2
  • Mobile-first
  • Responsive
  • Lightweight
  • List item 1
  • List item 2
  • Mobile-first
  • Responsive
  • Lightweight

Well Sizes

.well-sm
.well
.well-lg