JOIN

Cart

NOAH + Bootstrap Sample Page

New Comments!

View Details

New Tasks!

View Details

124

New Orders!

View Details

Support Tickets!

View Details

Area Chart Example

Bar Chart Example

#	Date	Time	Amount
3326	10/21/2013	3:29 PM	$321.33
3325	10/21/2013	3:20 PM	$234.34
3324	10/21/2013	3:03 PM	$724.17
3323	10/21/2013	3:00 PM	$23.71
3322	10/21/2013	2:49 PM	$8345.23
3321	10/21/2013	2:23 PM	$245.12
3320	10/21/2013	2:15 PM	$5663.54
3319	10/21/2013	2:13 PM	$943.45

Responsive Timeline

Lorem ipsum dolor

11 hours ago via Twitter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero laboriosam dolor perspiciatis omnis exercitationem. Beatae, officia pariatur? Est cum veniam excepturi. Maiores praesentium, porro voluptas suscipit facere rem dicta, debitis.
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem dolorem quibusdam, tenetur commodi provident cumque magni voluptatem libero, quis rerum. Fugiat esse debitis optio, tempore. Animi officiis alias, officia repellendus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium maiores odit qui est tempora eos, nostrum provident explicabo dignissimos debitis vel! Adipisci eius voluptates, ad aut recusandae minus eaque facere.
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus numquam facilis enim eaque, tenetur nam id qui vel velit similique nihil iure molestias aliquam, voluptatem totam quaerat, magni commodi quisquam.
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates est quaerat asperiores sapiente, eligendi, nihil. Itaque quos, alias sapiente rerum quas odit! Aperiam officiis quidem delectus libero, omnis ut debitis!
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis minus modi quam ipsum alias at est molestiae excepturi delectus nesciunt, quibusdam debitis amet, beatae consequuntur impedit nulla qui! Laborum, atque.
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fuga odio quibusdam. Iure expedita, incidunt unde quis nam! Quod, quisquam. Officia quam qui adipisci quas consequuntur nostrum sequi. Consequuntur, commodi.
Lorem ipsum dolor

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt obcaecati, quaerat tempore officia voluptas debitis consectetur culpa amet, accusamus dolorum fugiat, animi dicta aperiam, enim incidunt quisquam maxime neque eaque.

Notifications Panel

New Comment 4 minutes ago 3 New Followers 12 minutes ago Message Sent 27 minutes ago New Task 43 minutes ago Server Rebooted 11:32 AM Server Crashed! 11:13 AM Server Not Responding 10:57 AM New Order Placed 9:49 AM Payment Received Yesterday

View All Alerts

Donut Chart Example

View Details

Chat

Jack Sparrow 12 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
13 mins ago Bhaumik Patel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
Jack Sparrow 14 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.
15 mins ago Bhaumik Patel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur bibendum ornare dolor, quis ullamcorper ligula sodales.

Please Sign In

Remember Me

Area Chart Example

Bar Chart Example

Line Chart Example

Donut Chart Example

Morris.js Usage

Morris.js is a jQuery based charting plugin created by Olly Smith. In NOAH + Bootstrap Sample Page, we are using the most recent version of Morris.js which includes the resize function, which makes the charts fully responsive. The documentation for Morris.js is available on their website, http://morrisjs.github.io/morris.js/.

View Morris.js Documentation

Line Chart Example

Pie Chart Example

Multiple Axes Line Chart Example

Moving Line Chart Example

Bar Chart Example

Flot Charts Usage

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks, and interactive features. In NOAH + Bootstrap Sample Page, we are using the most recent version of Flot along with a few plugins to enhance the user experience. The Flot plugins being used are the tooltip plugin for hoverable tooltips, and the resize plugin for fully responsive charts. The documentation for Flot Charts is available on their website, http://www.flotcharts.org/.

View Flot Charts Documentation

Default Buttons

Normal Buttons

Disabled Buttons

Button Sizes

Circle Icon Buttons with Font Awesome Icons

Normal Circle Buttons

Large Circle Buttons

Extra Large Circle Buttons

Outline Buttons with Smooth Transition

Outline Buttons

Outline Button Sizes

Social Buttons with Font Awesome Icons

Social Buttons

Telerik RadGrid

Command item
Command item
Add new record	Refresh

Contact

First Name

Last Name

Command item
Command item
Add new record	Refresh

Data pager

1 2 3 4 5 6 7 8 9 10 ...

Page size:

PageSizeComboBox
	select

36099 items in 1805 pages

72310

River View Café


Contact:
First Name:
Last Name:

Update Cancel

72311

University Center Café

72457

Blue Devil Grill

72458

Coffee Kiosk

72459

Elevate Meal Plan

72460

Valley Services

72517

Charger Café

87738

NACUFS Marketplace

(Buyers Guide)

61436

Kincaid Building Group

(Tenant)

77971

Yamuna

78683

brooke

87369

Lindsley

A Kimball

83319

Misty

Aalexander

40302

Kristina

Aalfs

83384

Neala

Aaron

56175

Lucinda

Aaronson

40944

Coleen

Aas

43728

David

Abac

85545

David

Abadin

43153

Hassan

Abassary

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Max container width	None (auto)	750px	970px	1170px
Class prefix	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# of columns	12
Max column width	Auto	60px	78px	95px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, applying any .col-md- class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg- class is not present.

Example: Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a default grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1

.col-md-8

.col-md-4

.col-md-6

Example: Mobile and desktop

Don't want your columns to simply stack in smaller devices? Use the extra small and medium device grid classes by adding .col-xs-* .col-md-* to your columns. See the example below for a better idea of how it all works.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6

Example: Mobile, tablet, desktops

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-4

Responsive column resets

With the four tiers of grids available you're bound to run into issues where, at certain breakpoints, your columns don't clear quite right as one is taller than the other. To fix that, use a combination of a .clearfix and our responsive utility classes.

.col-xs-6 .col-sm-3
Resize your viewport or check it out on your phone for an example.

.col-xs-6 .col-sm-3

Offsetting columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-3

Nesting columns

To nest your content with the default grid, add a new .row and set of .col-md-* columns within an existing .col-md-* column. Nested rows should include a set of columns that add up to 12.

Level 1: .col-md-9

Level 2: .col-md-6

Column ordering

Easily change the order of our built-in grid columns with .col-md-push-* and .col-md-pull-* modifier classes.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-pull-9

All available icons (font-awesome)

fa-glass

fa-music

fa-search

fa-envelope-o

fa-heart

fa-star

fa-star-o

fa-user

fa-film

fa-th-large

fa-th

fa-th-list

fa-check

fa-times

fa-search-plus

fa-search-minus

fa-power-off

fa-signal

fa-gear

fa-cog

fa-trash-o

fa-home

fa-file-o

fa-clock-o

fa-road

fa-download

fa-arrow-circle-o-down

fa-arrow-circle-o-up

fa-inbox

fa-play-circle-o

fa-rotate-right

fa-repeat

fa-refresh

fa-list-alt

fa-lock

fa-flag

fa-headphones

fa-volume-off

fa-volume-down

fa-volume-up

fa-qrcode

fa-barcode

fa-tag

fa-tags

fa-book

fa-bookmark

fa-print

fa-camera

fa-font

fa-bold

fa-italic

fa-text-height

fa-text-width

fa-align-left

fa-align-center

fa-align-right

fa-align-justify

fa-list

fa-dedent

fa-outdent

fa-indent

fa-video-camera

fa-photo

fa-image

fa-picture-o

fa-pencil

fa-map-marker

fa-adjust

fa-tint

fa-edit

fa-pencil-square-o

fa-check-square-o

fa-arrows

fa-step-backward

fa-fast-backward

fa-backward

fa-play

fa-pause

fa-stop

fa-forward

fa-fast-forward

fa-step-forward

fa-eject

fa-chevron-left

fa-chevron-right

fa-plus-circle

fa-minus-circle

fa-times-circle

fa-check-circle

fa-question-circle

fa-info-circle

fa-crosshairs

fa-times-circle-o

fa-check-circle-o

fa-ban

fa-arrow-left

fa-arrow-right

fa-arrow-up

fa-arrow-down

fa-mail-forward

fa-expand

fa-compress

fa-plus

fa-minus

fa-asterisk

fa-exclamation-circle

fa-gift

fa-leaf

fa-fire

fa-eye

fa-eye-slash

fa-warning

fa-exclamation-triangle

fa-plane

fa-calendar

fa-random

fa-comment

fa-magnet

fa-chevron-up

fa-chevron-down

fa-retweet

fa-shopping-cart

fa-folder

fa-folder-open

fa-arrows-v

fa-arrows-h

fa-bar-chart-o

fa-twitter-square

fa-facebook-square

fa-camera-retro

fa-key

fa-gears

fa-cogs

fa-comments

fa-thumbs-o-up

fa-thumbs-o-down

fa-star-half

fa-heart-o

fa-sign-out

fa-linkedin-square

fa-thumb-tack

fa-external-link

fa-trophy

fa-github-square

fa-upload

fa-lemon-o

fa-phone

fa-square-o

fa-bookmark-o

fa-phone-square

fa-twitter

fa-facebook

fa-github

fa-unlock

fa-credit-card

fa-rss

fa-hdd-o

fa-bullhorn

fa-bell

fa-certificate

fa-hand-o-right

fa-hand-o-left

fa-hand-o-up

fa-hand-o-down

fa-arrow-circle-left

fa-arrow-circle-right

fa-arrow-circle-up

fa-arrow-circle-down

fa-globe

fa-wrench

fa-tasks

fa-filter

fa-briefcase

fa-arrows-alt

fa-group

fa-users

fa-chain

fa-link

fa-cloud

fa-flask

fa-cut

fa-scissors

fa-copy

fa-files-o

fa-paperclip

fa-save

fa-floppy-o

fa-square

fa-navicon

fa-reorder

fa-bars

fa-list-ul

fa-list-ol

fa-strikethrough

fa-underline

fa-table

fa-magic

fa-truck

fa-pinterest

fa-pinterest-square

fa-google-plus-square

fa-google-plus

fa-money

fa-caret-down

fa-caret-up

fa-caret-left

fa-caret-right

fa-columns

fa-unsorted

fa-sort

fa-sort-down

fa-sort-desc

fa-sort-up

fa-sort-asc

fa-envelope

fa-linkedin

fa-rotate-left

fa-undo

fa-legal

fa-gavel

fa-dashboard

fa-tachometer

fa-comment-o

fa-comments-o

fa-flash

fa-bolt

fa-sitemap

fa-umbrella

fa-paste

fa-clipboard

fa-lightbulb-o

fa-exchange

fa-cloud-download

fa-cloud-upload

fa-user-md

fa-stethoscope

fa-suitcase

fa-bell-o

fa-coffee

fa-cutlery

fa-file-text-o

fa-building-o

fa-hospital-o

fa-ambulance

fa-medkit

fa-fighter-jet

fa-beer

fa-h-square

fa-plus-square

fa-angle-double-left

fa-angle-double-right

fa-angle-double-up

fa-angle-double-down

fa-angle-left

fa-angle-right

fa-angle-up

fa-angle-down

fa-desktop

fa-laptop

fa-tablet

fa-mobile-phone

fa-mobile

fa-circle-o

fa-quote-left

fa-quote-right

fa-spinner

fa-circle

fa-mail-reply

fa-reply

fa-github-alt

fa-folder-o

fa-folder-open-o

fa-smile-o

fa-frown-o

fa-meh-o

fa-gamepad

fa-keyboard-o

fa-flag-o

fa-flag-checkered

fa-terminal

fa-code

fa-mail-reply-all

fa-reply-all

fa-star-half-empty

fa-star-half-full

fa-star-half-o

fa-location-arrow

fa-crop

fa-code-fork

fa-unlink

fa-chain-broken

fa-question

fa-info

fa-exclamation

fa-superscript

fa-subscript

fa-eraser

fa-puzzle-piece

fa-microphone

fa-microphone-slash

fa-shield

fa-calendar-o

fa-fire-extinguisher

fa-rocket

fa-maxcdn

fa-chevron-circle-left

fa-chevron-circle-right

fa-chevron-circle-up

fa-chevron-circle-down

fa-html5

fa-css3

fa-anchor

fa-unlock-alt

fa-bullseye

fa-ellipsis-h

fa-ellipsis-v

fa-rss-square

fa-play-circle

fa-ticket

fa-minus-square

fa-minus-square-o

fa-level-up

fa-level-down

fa-check-square

fa-pencil-square

fa-external-link-square

fa-compass

fa-toggle-down

fa-caret-square-o-down

fa-toggle-up

fa-caret-square-o-up

fa-toggle-right

fa-caret-square-o-right

fa-euro

fa-eur

fa-gbp

fa-dollar

fa-usd

fa-rupee

fa-inr

fa-cny

fa-rmb

fa-yen

fa-jpy

fa-ruble

fa-rouble

fa-rub

fa-won

fa-krw

fa-bitcoin

fa-btc

fa-file

fa-file-text

fa-sort-alpha-asc

fa-sort-alpha-desc

fa-sort-amount-asc

fa-sort-amount-desc

fa-sort-numeric-asc

fa-sort-numeric-desc

fa-thumbs-up

fa-thumbs-down

fa-youtube-square

fa-youtube

fa-xing

fa-xing-square

fa-youtube-play

fa-dropbox

fa-stack-overflow

fa-instagram

fa-flickr

fa-adn

fa-bitbucket

fa-bitbucket-square

fa-tumblr

fa-tumblr-square

fa-long-arrow-down

fa-long-arrow-up

fa-long-arrow-left

fa-long-arrow-right

fa-apple

fa-windows

fa-android

fa-linux

fa-dribbble

fa-skype

fa-foursquare

fa-trello

fa-female

fa-male

fa-gittip

fa-sun-o

fa-moon-o

fa-archive

fa-bug

fa-vk

fa-weibo

fa-renren

fa-pagelines

fa-stack-exchange

fa-arrow-circle-o-right

fa-arrow-circle-o-left

fa-toggle-left

fa-caret-square-o-left

fa-dot-circle-o

fa-wheelchair

fa-vimeo-square

fa-turkish-lira

fa-try

fa-plus-square-o

fa-space-shuttle

fa-slack

fa-envelope-square

fa-wordpress

fa-openid

fa-institution

fa-bank

fa-university

fa-mortar-board

fa-graduation-cap

fa-yahoo

fa-google

fa-reddit

fa-reddit-square

fa-stumbleupon-circle

fa-stumbleupon

fa-delicious

fa-digg

fa-pied-piper-square

fa-pied-piper

fa-pied-piper-alt

fa-drupal

fa-joomla

fa-language

fa-fax

fa-building

fa-child

fa-paw

fa-spoon

fa-cube

fa-cubes

fa-behance

fa-behance-square

fa-steam

fa-steam-square

fa-recycle

fa-automobile

fa-car

fa-cab

fa-taxi

fa-tree

fa-spotify

fa-deviantart

fa-soundcloud

fa-database

fa-file-pdf-o

fa-file-word-o

fa-file-excel-o

fa-file-powerpoint-o

fa-file-photo-o

fa-file-picture-o

fa-file-image-o

fa-file-zip-o

fa-file-archive-o

fa-file-sound-o

fa-file-audio-o

fa-file-movie-o

fa-file-video-o

fa-file-code-o

fa-vine

fa-codepen

fa-jsfiddle

fa-life-bouy

fa-life-saver

fa-support

fa-life-ring

fa-circle-o-notch

fa-ra

fa-rebel

fa-ge

fa-empire

fa-git-square

fa-git

fa-hacker-news

fa-tencent-weibo

fa-qq

fa-wechat

fa-weixin

fa-send

fa-paper-plane

fa-send-o

fa-paper-plane-o

fa-history

fa-circle-thin

fa-header

fa-paragraph

fa-sliders

fa-bomb

All available icons (bootstrap)

glyphicon-asterisk
glyphicon-plus
glyphicon-euro
glyphicon-eur
glyphicon-minus
glyphicon-cloud
glyphicon-envelope
glyphicon-pencil
glyphicon-glass
glyphicon-music
glyphicon-search
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-map-marker
glyphicon-adjust
glyphicon-tint
glyphicon-edit

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-resize-full
glyphicon-resize-small
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-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-down
glyphicon-collapse-up
glyphicon-log-in
glyphicon-flash
glyphicon-log-out
glyphicon-new-window
glyphicon-record
glyphicon-save
glyphicon-open
glyphicon-saved
glyphicon-import
glyphicon-export
glyphicon-send

glyphicon-floppy-disk
glyphicon-floppy-saved
glyphicon-floppy-remove
glyphicon-floppy-save
glyphicon-floppy-open
glyphicon-credit-card
glyphicon-transfer
glyphicon-cutlery
glyphicon-header
glyphicon-compressed
glyphicon-earphone
glyphicon-phone-alt
glyphicon-tower
glyphicon-stats
glyphicon-sd-video
glyphicon-hd-video
glyphicon-subtitles
glyphicon-sound-stereo
glyphicon-sound-dolby
glyphicon-sound-5-1
glyphicon-sound-6-1
glyphicon-sound-7-1
glyphicon-copyright-mark
glyphicon-registration-mark
glyphicon-cloud-download
glyphicon-cloud-upload
glyphicon-tree-conifer
glyphicon-tree-deciduous
glyphicon-cd
glyphicon-save-file
glyphicon-open-file
glyphicon-level-up
glyphicon-copy
glyphicon-paste
glyphicon-alert
glyphicon-equalizer
glyphicon-king
glyphicon-queen
glyphicon-pawn
glyphicon-bishop
glyphicon-knight
glyphicon-baby-formula
glyphicon-tent
glyphicon-blackboard
glyphicon-bed
glyphicon-apple
glyphicon-erase
glyphicon-hourglass
glyphicon-lamp
glyphicon-duplicate
glyphicon-piggy-bank
glyphicon-scissors
glyphicon-bitcoin
glyphicon-yen
glyphicon-ruble
glyphicon-scale
glyphicon-ice-lolly
glyphicon-ice-lolly-tasted
glyphicon-education
glyphicon-option-horizontal
glyphicon-option-vertical

glyphicon-oil
glyphicon-grain
glyphicon-sunglasses
glyphicon-text-size
glyphicon-text-color
glyphicon-text-background
glyphicon-object-align-top
glyphicon-object-align-bottom
glyphicon-object-align-horizontal
glyphicon-object-align-left
glyphicon-object-align-vertical
glyphicon-object-align-right
glyphicon-triangle-right
glyphicon-triangle-left
glyphicon-triangle-bottom
glyphicon-triangle-top
glyphicon-console
glyphicon-superscript
glyphicon-subscript

Alert Styles

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.

Dismissable Alerts

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.

Modals

Tooltips and Popovers

Tooltip Demo

Clickable Popover Demo

Default Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Primary Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Success Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Info Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Warning Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Danger Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Green Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Yellow Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Red Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Panel Footer

Collapsible Accordion Panel Group

Collapsible Group Item #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Collapsible Group Item #2

Collapsible Group Item #3

Basic Tabs

Home Tab

Profile Tab

Messages Tab

Settings Tab

Pill Tabs

Home Tab

Profile Tab

Messages Tab

Settings Tab

Normal Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Large Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Small Well

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.

Jumbotron

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing.

Learn more

DataTables Advanced Tables

Rendering engine	Browser	Platform(s)	Engine version	CSS grade
Trident	Internet Explorer 4.0	Win 95+	4	X
Trident	Internet Explorer 5.0	Win 95+	5	C
Trident	Internet Explorer 5.5	Win 95+	5.5	A
Trident	Internet Explorer 6	Win 98+	6	A
Trident	Internet Explorer 7	Win XP SP2+	7	A
Trident	AOL browser (AOL desktop)	Win XP	6	A
Gecko	Firefox 1.0	Win 98+ / OSX.2+	1.7	A
Gecko	Firefox 1.5	Win 98+ / OSX.2+	1.8	A
Gecko	Firefox 2.0	Win 98+ / OSX.2+	1.8	A
Gecko	Firefox 3.0	Win 2k+ / OSX.3+	1.9	A
Gecko	Camino 1.0	OSX.2+	1.8	A
Gecko	Camino 1.5	OSX.3+	1.8	A
Gecko	Netscape 7.2	Win 95+ / Mac OS 8.6-9.2	1.7	A
Gecko	Netscape Browser 8	Win 98SE+	1.7	A
Gecko	Netscape Navigator 9	Win 98+ / OSX.2+	1.8	A
Gecko	Mozilla 1.0	Win 95+ / OSX.1+	1	A
Gecko	Mozilla 1.1	Win 95+ / OSX.1+	1.1	A
Gecko	Mozilla 1.2	Win 95+ / OSX.1+	1.2	A
Gecko	Mozilla 1.3	Win 95+ / OSX.1+	1.3	A
Gecko	Mozilla 1.4	Win 95+ / OSX.1+	1.4	A
Gecko	Mozilla 1.5	Win 95+ / OSX.1+	1.5	A
Gecko	Mozilla 1.6	Win 95+ / OSX.1+	1.6	A
Gecko	Mozilla 1.7	Win 98+ / OSX.1+	1.7	A
Gecko	Mozilla 1.8	Win 98+ / OSX.1+	1.8	A
Gecko	Seamonkey 1.1	Win 98+ / OSX.2+	1.8	A
Gecko	Epiphany 2.20	Gnome	1.8	A
Webkit	Safari 1.2	OSX.3	125.5	A
Webkit	Safari 1.3	OSX.3	312.8	A
Webkit	Safari 2.0	OSX.4+	419.3	A
Webkit	Safari 3.0	OSX.4+	522.1	A
Webkit	OmniWeb 5.5	OSX.4+	420	A
Webkit	iPod Touch / iPhone	iPod	420.1	A
Webkit	S60	S60	413	A
Presto	Opera 7.0	Win 95+ / OSX.1+	-	A
Presto	Opera 7.5	Win 95+ / OSX.2+	-	A
Presto	Opera 8.0	Win 95+ / OSX.2+	-	A
Presto	Opera 8.5	Win 95+ / OSX.2+	-	A
Presto	Opera 9.0	Win 95+ / OSX.3+	-	A
Presto	Opera 9.2	Win 88+ / OSX.3+	-	A
Presto	Opera 9.5	Win 88+ / OSX.3+	-	A
Presto	Opera for Wii	Wii	-	A
Presto	Nokia N800	N800	-	A
Presto	Nintendo DS browser	Nintendo DS	8.5	C/A¹
KHTML	Konqureror 3.1	KDE 3.1	3.1	C
KHTML	Konqureror 3.3	KDE 3.3	3.3	A
KHTML	Konqureror 3.5	KDE 3.5	3.5	A
Tasman	Internet Explorer 4.5	Mac OS 8-9	-	X
Tasman	Internet Explorer 5.1	Mac OS 7.6-9	1	C
Tasman	Internet Explorer 5.2	Mac OS 8-X	1	C
Misc	NetFront 3.1	Embedded devices	-	C
Misc	NetFront 3.4	Embedded devices	-	A
Misc	Dillo 0.8	Embedded devices	-	X
Misc	Links	Text only	-	X
Misc	Lynx	Text only	-	X
Misc	IE Mobile	Windows Mobile 6	-	C
Misc	PSP browser	PSP	-	C
Other browsers	All others	-	-	U

DataTables Usage Information

DataTables is a very flexible, advanced tables plugin for jQuery. In NOAH + Bootstrap Sample Page, we are using a specialized version of DataTables built for Bootstrap 3. We have also customized the table headings to use Font Awesome icons in place of images. For complete documentation on DataTables, visit their website at https://datatables.net/.

View DataTables Documentation

Kitchen Sink

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

Basic Table

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

Striped Rows

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

Bordered Table

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

Hover Rows

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

Context Classes

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

Headings

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading

Heading 6 Sub-heading

Paragraphs

This is an example of lead body copy.

This is an example of standard paragraph text. This is an example of link anchor text within body copy.

This is an example of small, fine print text.

This is an example of strong, bold text.

This is an example of emphasized, italic text.

Alignment Helpers

Left aligned text.

Center aligned text.

Right aligned text.

Emphasis Classes

This is an example of muted text.

This is an example of primary text.

This is an example of success text.

This is an example of info text.

This is an example of warning text.

This is an example of danger text.

Abbreviations

The abbreviation of the word attribute is attr.

HTMLis an abbreviation for a programming language.

Addresses

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890

Full Name
first.last@example.com

Blockquotes

Default Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Blockquote with Citation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

Right Aligned Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lists

Unordered List

List Item
List Item
- List Item
- List Item
- List Item
List Item

Ordered List

List Item
List Item
List Item

Unstyled List

List Item
List Item
List Item

Inline List

List Item
List Item
List Item

Description Lists

Standard Description List: Description Text
Description List Title: Description List Text

Horizontal Description List: Description Text
Description List Title: Description List Text

Code

This is an example of an inline code element within body copy. Wrap inline code within a <code>...</code>tag.

This is an example of preformatted text.

Document Headers

Main Title

Support Title goes here

Support Data | Support Date II

Standard Headers

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Hyperlink

Text and Quotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sem risus, imperdiet eu mollis id, laoreet in magna. Vivamus eu sem non urna imperdiet porta. In pretium dapibus placerat. Nulla dignissim gravida sapien, id accumsan dolor dictum quis. Pellentesque at condimentum nunc. Nullam a velit sed tellus fermentum scelerisque. Quisque et tristique arcu. Etiam massa lacus, commodo eget convallis sodales, semper id metus. Sed ullamcorper dolor molestie, tempor magna ut, tincidunt nulla. Aliquam erat volutpat. Aliquam sit amet sollicitudin nunc, id mattis nibh. Pellentesque faucibus, neque vel egestas eleifend, magna nunc elementum quam, in malesuada risus libero vel nulla.

Nunc eu mi urna. Nunc ligula purus, ullamcorper et ante in, placerat bibendum quam. Phasellus id mauris vel mauris vestibulum consequat. Mauris iaculis pharetra orci id vestibulum. Nunc velit nisl, mattis venenatis metus et, posuere tincidunt urna. Duis quis nisl semper, elementum nunc in, malesuada lorem.

Quisque hendrerit vel velit vitae lacinia. Proin ut aliquet risus. Aenean posuere est sit amet vulputate pellentesque. Phasellus feugiat, nisi vel elementum placerat, metus ante consequat tortor, a rutrum dolor elit sed justo.

Curabitur adipiscing id ante sit amet accumsan. Sed sit amet sem nisl. Vivamus malesuada, mi sit amet dictum aliquet, libero orci ullamcorper mauris, vitae ultrices enim ligula id urna. Duis tristique rutrum lorem id convallis. Phasellus fringilla, felis aliquet auctor placerat, felis diam imperdiet nibh, id dictum sapien urna quis urna.

Lists

Unordered List

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

Ordered List

List Item 1
List Item 2
List Item 3
List Item 4
List Item 5

Buttons

Link Buttons

{LinkButton-Text} Primary

{LinkButton-Text} Secondary

{LinkButton-Text} disabled

{LinkButton-Text} Secondary disabled

Form Buttons

Standard Form Buttons

Serve Boxes

City, Country | Category

Day Month Year - Day Month Year

Event Title Name

Vertical

Day Month Year - Day Month Year

Event Title Name

Article

Event Title Name

Day Month Year - Day Month Year

Large Video Box (Lightbox)

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Picture Item Box (Lightbox)

Lorem ipsum dolor sit amet

Picture Data Item Box (Lightbox)

Lorem ipsum dolor sit amet

Consectetur adipiscing elit.

Light Box Content 1

Lorem ipsum dolor sit amet

Light Box Content 2

Lorem ipsum dolor sit amet

Light Box Content 3

Lorem ipsum dolor sit amet

Dashboard

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Lorem ipsum dolor

Blank

Please Sign In

Morris.js Charts

Flot

Buttons

Normal Buttons

Disabled Buttons

Button Sizes

Normal Circle Buttons

Large Circle Buttons

Extra Large Circle Buttons

Outline Buttons

Outline Button Sizes

Social Buttons

Forms

Disabled Form States

Form Validation States

Input Groups

NOAH Forms

Standard HTML

Telerik RadGrid

Grid

Grid options

Example: Stacked-to-horizontal

Example: Mobile and desktop

Example: Mobile, tablet, desktops

Responsive column resets

Offsetting columns

Nesting columns

Column ordering

Icons

Notifications

Tooltip Demo

Clickable Popover Demo

Panels and Wells

Home Tab

Profile Tab

Messages Tab

Settings Tab

Home Tab

Profile Tab

Messages Tab

Settings Tab

Normal Well

Large Well

Small Well

Jumbotron

Tables

DataTables Usage Information

Typography

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading

Heading 6 Sub-heading

Alignment Helpers

Addresses

Default Blockquote

Blockquote with Citation

Right Aligned Blockquote

Unordered List

Ordered List

Unstyled List

Inline List

Document Headers

Standard Headers

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5