NOAH + Bootstrap Sample Page

Dashboard

26
New Comments!
12
New Tasks!
124
New Orders!
13
Support Tickets!
# 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.

Donut Chart Example
  • User Avatar
    Jack Sparrow 12 mins ago

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

  • User Avatar
    13 mins ago Bhaumik Patel

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

  • User Avatar
    Jack Sparrow 14 mins ago

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

  • User Avatar
    15 mins ago Bhaumik Patel

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

Blank

Morris.js Charts

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

Flot

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

Buttons

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



Forms

Basic Form Elements

Example block-level help text here.

email@example.com

Disabled Form States

Form Validation States

Input Groups

@
.00
$ .00

NOAH Forms

Standard HTML

Label :
Label :
Label :
Label :

Telerik RadGrid


Command item
Command item
Add new recordRefresh
84059-Zain Ul Abidin
Update Cancel
8347414644Cleanroom
78311AQuinn
82464aa
83842ABarkley
83923AA
38956A.Brunner
45485A.Galef
60519A.Scorey
66597A.Greer II
85284A.Arnett
48220A. MariaMinowitz
2435A. MichaelVitullo
59363A.J.Baker
83369AafaqueKhan
62778AAKASHSACHDEVA
72892AakashMange
82356AakashPatel
62743AAkeSvensson
60648AamerMahmood
Command item
Command item
Add new recordRefresh
Data pager
Data pager
Page size:
PageSizeComboBox
select
 14986 items in 750 pages

Grid

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-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.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 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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
.col-xs-6 .col-sm-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
.col-xs-6 .col-sm-3
.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-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
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

Icons

All available icons (font-awesome)

fa-glass


fa-music



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-share-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-share


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-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-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-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-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-share-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-share-alt


fa-share-alt-square


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-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-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-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-menu-hamburger
glyphicon-modal-window
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
glyphicon-menu-left
glyphicon-menu-right
glyphicon-menu-down
glyphicon-menu-up

Notifications

Alert Styles
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Dismissable Alerts
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alert Link.
Modals
Tooltips and Popovers

Tooltip Demo


Clickable Popover Demo

Panels and Wells

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.

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.

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.

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.

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.

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.

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.

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.

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.

Collapsible Accordion Panel Group
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.
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.
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.
Basic Tabs

Home Tab

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.

Profile Tab

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.

Messages Tab

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.

Settings Tab

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.

Pill Tabs

Home Tab

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.

Profile Tab

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.

Messages Tab

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.

Settings Tab

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.

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

Tables

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/A1
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

Typography

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

  1. List Item
  2. List Item
  3. 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

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

Buttons


Serve Boxes

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Serve Boxes (Alternate)

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.


Information Box

Block Header

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Information Box (With Image)

Block Header

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Information Box (Alternate)

Block Header

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Information Box (Alternate with Image)

Block Header

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Box title

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.

Summary Box Items

Horizontal

City, Country | Category
Day Month Year - Day Month Year
Event Title Name
Flag

Vertical

Day Month Year - Day Month Year
Event Title Name
Type

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
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 Data Item Box (Lightbox)

Lorem ipsum dolor sit amet
Consectetur adipiscing elit.

Light Box Content 1

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Light Box Content 2

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Light Box Content 3

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Alternative Service Boxes

Dummy Image

Advocacy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum porta blandit. Fusce auctor risus turpis, et sodales sapien interdum at. Aenean sodales sed nibh ac tincidunt. Maecenas.

Dummy Image

Perspectives on Science & Practice

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum porta blandit. Fusce auctor risus turpis, et sodales sapien interdum at. Aenean sodales sed nibh ac tincidunt. Maecenas.

Dummy Image

xxxx Publications

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed fermentum porta blandit. Fusce auctor risus turpis, et sodales sapien interdum at. Aenean sodales sed nibh ac tincidunt. Maecenas.


Bootstrap Columns to replace tables

Below, you will see content that was taken from a page that relied on tables, converted to using div's and Bootstrap columns to achieve the same look, but be more responsive for mobile viewing.

Below is from this page: https://www.iest.org/About/History/In-Memoriam. The example below uses a col-xx-2 (location of the image) and then a col-xx-10 for the text. You can find more about t his in the Sampler above under "Grid". The idea is that the total length of the combined columns will equal 12. They will always equal 12 - if not, they will do some screwy things. Should you want more room between the image and the text, you could increase the size of the column that contains the photo from 2 to 3, but then equally, you have to remove one from the div containing the text from 10 to 9, so that the final solution equals 12. Alternatively, you could keep the image div at col-xx-2, then add a blank col-xx-1, then change the 3rd column to col-xx-9.

Richard Freeman

IEST mourns the loss of Richard "Johnny" Freeman. Johnny passed away on April 22, 2022 in Springfield, Ohio. He was 89. Johnny was an IEST member since 1979 and an IEST Greater Ohio Chapter officer. He earned a mechanical engineering degree from the University of Dayton in 1968. For more than 40 years, Johnny used his engineering degree working at Wright-Patterson Air Force Base. Johnny was passionate about continuing education, photography and Formula One car racing.

 

Lucy E. Belonger

Former IEST staff member Lucy E. Belonger passed away on May 2, 2022 in her northern Alabama home. She was 95. Lucy was the exhibit and membership coordinator at IEST in the 1980s and early 1990s. She received the IEST President's Award for outstanding work in 1991, specifically for her excellent contributions that led to an increase in membership and an increase in attendees and exhibitors at IEST's annual technical conference that year. Lucy retired from IEST in May 1991.

 

Michael L. Mendias

Michael L. Mendias, P.E., an IEST member since 1975, passed away on January 7, 2022. His contributions to IEST include serving as IEST’s Southwest chapter president, authoring papers published in the Journal of the IEST, presenting at several annual conferences, and serving on annual technical meeting and program committees. In 1993, Michael received the IEST Fred Hermann Memorial Award. Michael spent the last 27 years of his career as environmental manager at Triumph Aerostructures, a successor company to Vought Aircraft Company.

 

David C. Swinehart

IEST Fellow David Swinehart, 86, passed away February 12, 2022 in Kokomo, Indiana. He left a work legacy of leadership, dedication, and innovation for his contributions to the industrial cleanroom field. David worked as an engineer for The Boeing Company, the Stellite Division of the Cabot Corp., and for Delco Electronics. An IEST member since 1969, David helped to create standards for cleanrooms as a voting member of several working groups. He was the recipient of several IEST awards: the Robert L. Mielke Award in 2012 for outstanding contributions to IEST's development of standards and practices; the Al Lieberman Mentoring Award in 2011 for mentoring and sharing his expertise; the Willis J. Whitfield Award in 1996 for substantial contributions to the contamination control field through published papers, studies and reports; and the James R. Mildon Award in 1990 for advancing the field of contamination control. David was also affectionately known by his colleagues as a compulsive editor, proofreader, and punster.

 

 

David P. Taylor

The IEST community mourns the loss of Member David P. Taylor from NASA Langley Research Center. He passed away on September 7, 2020 at the age of 63.


Headquarters Staff

The IEST staff supports and advances the mission of the IEST in providing resources, information, and quality service for its members, other professionals, and their industries in a timely, cooperative, and courteous manner. If you have an inquiry on a specific topic, please refer to the directory below for a direct e-mail link to the appropriate staff member. General questions may be sent to information@iest.org or submitted via a web form.


Executive Director Angela McKay, CAE
(847) 981-0100, ext. 6010 | executive@iest.org
Executive Board
Strategic planning, bylaws, and policy
Liaison to industry organizations
Partnerships - corporate and event sponsors
General management (programs, meetings, and activities)
Finance, investments, accounts payable
 
Manager, Technical Programs Jennifer Sklena
(847) 981-0100, ext. 6011 | technicaldept@iest.org
US TAG Activities
ISO/TC209 Secretariat coordinator
IEST Working Groups administration
ISO Secretariat support for ANSI
 
Coordinator, Education and Meetings Heather Wooden
(847) 981-0100, ext. 6014 | education@iest.org
Continuing education programs and conference sessions
ESTECH Planning Committee
Educational Advisory Committee (EAC)
IEST and liaison meeting planning
ESTECH Expo and Exhibitors
 
Coordinator, Membership and Accounting Mara Douvris
(847) 981-0100, ext. 6109 | membershipdept@iest.org
Meeting and education registrations
Membership applications and renewals
Website, database, online store, network site licensing
Accounts receivable, corporate sponsor billing, donations
Journal subscriptions, publication orders
 
Assistant, Member and Corporate Relations Susan Stamatkin
(847) 981-0100, ext. 6015 | customerservice@iest.org
Membership relations
Exhibitor and sponsor relations
Corporate Sponsors relations
Reception and general office
Staff support
 
Communications and Marketing Heather Swink, CAE
(847) 981-0100 | communications@iest.org
Marketing, communications, and outreach
Media relations, ad trades, reciprocal marketing and press releases
Membership growth and development
ThisWeek@IEST and NewsBrief@IEST
 

JOIN THE IEST TEAM
IEST is not currently hiring for any open positions. Thank you for your interest!