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

Grid

Bootstrap 3 scaffolding has changed for improved display on mobile devices

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

Bootstrap 3 Buttons

With no gradients and borders, Bootstrap 3.0 buttons now have a flatter look

Button Sizes (4)

Button Classes

Bootstrap 3 Icons

The 2.x icons are now replaced by glyphicons in BS3.

  • 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

Forms

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

Tables

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

Miscellaneous

Pagination

Pagers

Tabs

I’m in Section A.

Howdy, I’m in Section B.

What up girl, this is Section C.

Pills

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

Linked list groupDapibus ac facilisis inMorbi leo risus

Porta ac consectetur ac

Vestibulum at eros

Well Sizes

.well-sm
.well
.well-lg

Edit on Bootply