DTO UI-Kit Bootstrap Theme

A drop-in Bootstrap v3 stylesheet in the style of the Australian Government DTO's UI-Kit.

Last updated:

Small site

With small navigation beside and no search.

Header search

With full width navigation below.

Full header branding

With navigation and search underneath.

Light header

Dark header

"Hero" headers

Now with twice as much padding as our nearest competitor!
It's like Jumbotron, for headers.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text here. Paragraph inline link here. Paragraph text here. Paragraph text here. an external link.

Heading 1 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Heading 2 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Heading 3 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Heading 4 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Heading 5 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.
Heading 6 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Paragraph text that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

this text has been deleted
this text has been inserted
this text is no longer accurate/relevant
sample text
mark text
varName = 0
Data attr
sub text sup text


Linked heading 1 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Linked heading 2 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Linked heading 3 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Linked heading 4 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Linked heading 5 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.
Linked heading 6 that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Linked paragraph text that is far to long and therefore wraps over multiple lines, testing whether the line height has been set to something appropriate or not.

Button groups

Disabled state

CTA link

Sign up

Heading

Main jumbotron for a primary marketing message or call to action.

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.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
4 Steve Jobs @apple
5 Bob Jane @tyres
demo image demo image demo image
image

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

image

Thumbnail label link

Subtext for header, eg meta info text

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

image

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

image

Thumbnail label link

Subtext for header, eg meta info text

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

64x64

Media heading

Cras sit amet nibh libero, in inline link gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Linked Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo.

Circle — Icons only

Inline — Icons with text

Short title View ________ definition

88k extra information

Page load

1.2s on average

Glyphicons

88

FontAwesome View ________ definition

88 no unit link

Default Alpha Beta Primary Success Info Warning Danger

Default Alpha Beta Primary Success Info Warning Danger

Default Alpha Beta Primary Success Info Warning Danger

Default Alpha Beta Primary Success Info Warning Danger

Default Alpha Beta Primary Success Info Warning Danger
Default Alpha Beta Primary Success Info Warning Danger

Default Alpha Beta Primary Success Info Warning Danger

As links

Default Alpha Beta Primary Success Info Warning Danger

Within links

Default Alpha Beta Primary Success Info Warning Danger

Inbox 42

Tabs

Pills (same as Tabs)

Stacked

Standard

Status

Calendar Callout

Non-standard Bootstrap class

Plain paragraph text here.

Some muted text here.

Some primary text here.

Some success text here.

Some info text here.

Some warning text here.

Some danger text here.

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

Inline list

Stacked list

  • 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

Progress list

  • Think of a thing

    Done Just a standard sort of item, nothing fancy here.
  • Design a thing

    Done Just a standard sort of item with a link.
  • Protype a thing

    Doing Just a standard sort of item
  • Built a thing

    To do Something else that needs to be done
  • Something with a stupidly long heading that even contains a link

    To do An item that is a link But may even contain extra long amounts of text that are not even a link too.
  • Built a thing

    To do Something else that needs to be done

List with icons

  • List item with icon
  • Linked list item with icon
  • List item with icon and an inline link
  • List item with icon and a heading + text

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

Repeating word list

Table of contents

Non-standard Bootstrap class

Standard

Panel title

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

Contextual alternatives

Panel primary

Panel content

Panel success

Panel content

Panel info

Panel content

Panel warning

Panel content

Panel danger

Panel content

Collapsible panel (accordion)

Mainly for use when you don't want a good UX 😛

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

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

Panel body content. With a sub-panel

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

Inline snippet

For example, <section> should be wrapped as inline.

Code block

Sample code block with a variable in it.

Sample output

This text is meant to be treated as sample output from a computer program.

User input

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

Wells

A small well
Well, well, well…

A large well. 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.

Inline

An in-line quote here.

Block

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.

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.

with a citation

Pull

An editorial block quote (a pull quote).

Other

A block quote containing

another block quote

with a citation

Basic

Example block-level help text here.

Inline

Disabled states

Disabled fieldset

Validation states

The validation icons used can use any icon library, but top value may need to be tweaked if not using Glyphicons or Font Awesome.
A block of help text that breaks onto a new line and may extend beyond one line.

Input groups