Bootstrap 3 Template

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

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-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
  • 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-collapse
  • glyphicon-collapse-top

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.

Nav Lists

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

Bootstrap 3 Alerts