Londinium - premium responsive admin template by Eugene Kopyov

### Boxed layout Page example with boxed layout

9

##### Page layout with fixed navbar

Page layout example with sticked to top navbar, fixed position.

###### Modals

Default dialog style

#### Modal title

One fine body…

#### Modal title

##### Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

##### Tooltips in a modal

This link and that link should have tooltips on hover.

##### Overflowing text to show optional scrollbar

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

#### Modal with icons

Alert inside modal sample

##### Sample heading with icon

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

#### Modal with form

###### Step 1: Your shipping information Please enter your shipping info

Country:
First name
Last name
Address line 1
Address line 2
City
State/Province
ZIP code
Email name@domain.com
Phone # +99-99-9999-9999

#### Modal with table

###### Table inside modal

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

#### Loading remote path

One fine body…

#### Modal with tabs

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

#### WYSIWYG editor inside modal

#### Large modal

#### Small modal

One fine body…

###### Growl notifications

Default Growl styling
×
Some info!
Info message text sample
×
Error!
Something went wrong here
×
Warning!
Be sure you want to do it!
×
Success!
Everything is fine here

###### Spinners

###### Progress bars

Progress bar colors
15% Complete
35% Complete
55% Complete
75% Complete
95% Complete
Progress bar options
20% Complete
40% Complete
60% Complete
80% Complete
35% Complete (success)
20% Complete (warning)
10% Complete (danger)

###### Alerts

Error alert
Success alert
Warning & default alert
Good to know! Info alert

###### Alerts

###### Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take action Or do this

###### Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take action Or do this

###### Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take action Or do this

###### Oh snap! You got an error!

Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

Take action Or do this

###### Tooltips

Top Right Bottom Left

###### Popovers

### Popover top

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover bottom

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover right

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

### Popover left

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

###### Labels

Labels | Markup
--- | ---
Default | `<span class="label label-default">Default</span>`
Primary | `<span class="label label-primary">Primary</span>`
Success | `<span class="label label-success">Success</span>`
Warning | `<span class="label label-warning">Warning</span>`
Danger | `<span class="label label-danger">Danger</span>`
Info | `<span class="label label-info">Info</span>`
142 | `<span class="badge">Badge</span>`