Jumbotron

Theme example

This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.

Text heading 1in a div.page-header

Heading 2

Sed ut pers picia tis unde omnis iste natus error sit vol up tm aper iam, eaque...

Heading 3

Ipsa quae ab illo inv ento re veri tatis et quasi archi ta sunt exp icabo atem ...

Heading 4

Quia volu tas sit aspe natur aut odit aut fugit, sed quidolores eos qui ranesci...

Heading 5

Neque porro quis quam est, qui dolor em ipsum quia doladi pisci velit, ei modi...

Heading 6

Ipsa quae ab illo inv ento re veri tatis et quasi archi tecto beatae vitae diem ...

  • Unordered List
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Sed do eiusmod tempor incididunt
  1. Ordered List
  2. Ut labore et dolore magna aliqua
  3. Ut enim ad minim veniam
  4. Quis nostrud exercitation ullamco
Pre 
		laboris nisi ut aliquip ex ea commodo consequat.
		Duis aute irure dolor in reprehenderit in 
		voluptate velit esse cillum 
								dolore eu fugiat
Blockquote. Nulla pariatur. Excepteur sint occaecat cupidatat non proident, erunt lit anim id est laborum.

Link this is a link

Bold This text is bold

Strong This text is important!

Italic This text is italic

Emphasis This text is emphasized

Small This is some smaller text.

Big This is some bigger text.

Mark - Do not forget to buy milk today.

Del - My favorite color is blue red.

Ins - My favorite color is blue red.

Sub - This is subscripted text.

Sup - This is superscripted text.

Code This is code

Q - WWF's goal is to: Build a future where people live in harmony with nature.

Abbr - The WHO was founded in 1948.

Address John Doe.
Visit us at:
Example.com
Box 564, Disneyland
USA

Cite The Scream by Edvard Munch. Painted in 1893.

DT Coffee
DD - black hot drink
DT Milk
DD - white cold drink

Forms

Update My Information

Bootstrap form controls
Portal form controls






Buttons

Tables

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

Example Entitylist

Title. sort descending Consumer. sort descending Start Date . sort descending End Date. sort descending Subject Type. sort descending Context Type. sort descending Intent. sort descending Actions
Kazeiki Oducado's - Inpatient Depression Care Plan Kazeiki Oducado Patient Episode Of Care Plan
Zea Ryan's - ICT Admin Create Care Plan Template Zea Ryan Patient Episode Of Care
Johnny Read's - Inpatient Depression Care Plan Johnny Read Patient Episode Of Care Plan

Thumbnails

... ... A generic square placeholder image with a white border around it, making it resemble a photograph taken with an old instant camera

Labels

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger
Default Primary Success Info Warning Danger

Default Primary Success Info Warning Danger

Badges

Inbox 42

Dropdown menus

The data-toggle="dropdown" attribute is used to open the dropdown menu.

Tabs

William Gibson
Kurt Vonnegut
Mervyn Peake
Harper Lee
Marguerite Duras
Umberto Eco
Shirley Jackson
Ursula K. Le Guin
Stanislaw Lem
Angela Carter
Theodor Seuss Geisel
Primo Levi
Emily St John Mandel
Bruce Chatwin
Noam Chomsky
Jean Cocteau
Leonard Cohen
Roald Dahl
Louis de Bernières
Antoine de Saint-Exupéry
Philip K. Dick
Kahlil Gibran

Vertical Tabs

This tab ID = #homev

William Gibson
Kurt Vonnegut
Mervyn Peake
Harper Lee

This tab ID = #profilev

Marguerite Duras
Umberto Eco
Shirley Jackson
Ursula K. Le Guin
Stanislaw Lem

This tab ID = #messagesv

Angela Carter
Theodor Seuss Geisel
Primo Levi
Emily St John Mandel
Bruce Chatwin
Noam Chomsky

Tingling of the spine venture worldlets quasar Orion's sword courage of our questions. A still more glorious dawn awaits across the centuries laws of physics gathered by gravity across the centuries rich in heavy atoms. Rings of Uranus rings of Uranus with pretty stories for which there's little good evidence invent the universe a mote of dust suspended in a sunbeam citizens of distant epochs? Permanence of the stars the carbon in our apple pies not a sunrise but a galaxyrise not a sunrise but a galaxyrise made in the interiors of collapsing stars take root and flourish.

Dream of the mind's eye extraplanetary vastness is bearable only through love astonishment gathered by gravity hydrogen atoms. Circumnavigated are creatures of the cosmos a very small stage in a vast cosmic arena globular star cluster kindling the energy hidden in matter Apollonius of Perga. Tendrils of gossamer clouds something incredible is waiting to be known dispassionate extraterrestrial observer a still more glorious dawn awaits citizens of distant epochs with pretty stories for which there's little good evidence.

Pills

Angela Carter
Theodor Seuss Geisel
Primo Levi
Emily St John Mandel
Bruce Chatwin
Noam Chomsky
Jean Cocteau
Leonard Cohen
Roald Dahl
Louis de Bernières
Antoine de Saint-Exupéry
Philip K. Dick
Kahlil Gibran
William Gibson
Kurt Vonnegut
Mervyn Peake
Harper Lee
Marguerite Duras
Umberto Eco
Shirley Jackson
Ursula K. Le Guin
Stanislaw Lem

Navbars

Navbar Default

Navbar Inverse

Alerts

Progress bars

60% Complete
40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
60% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

List groups

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
Cras justo odio Dapibus ac facilisis in Morbi leo risus Porta ac consectetur ac Vestibulum at eros

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

List group item heading

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

Panels

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Wells

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur.

Carousel

Tooltips

Popover

Collapse

Simple collapsible

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.

Collapsible panel

Simple collapsible panel

Panel Body. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Panel Footer. Lorem ipsum dolor sit amet, consectetur

Accordion

Collapsible Group 1

This is a heading outside the panel tags

This is text outside the panel tags

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.
To display accordion open, include class=<'panel-collapse collapse in'>

Collapsible Group 2

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.

Collapsible Group 3

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.

Summary & Details

Summary tag

Details tag

Details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag details tag.

Modal

Row of Thumbnails

100%x290

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

100%x290

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

100%x290

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Media Objects

Left-aligned with .media-left-background

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Right-aligned with .media-right-background

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Media Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Media Middle

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Media Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Nested Media Objects

Media objects can also be nested (a media object inside a media object):


John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

John Doe Posted on February 19, 2016

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.