Assign modules on offcanvas module position to make them visible in the sidebar.

Menu

Love story !

Love Story

Loading Theme Customizer. Please wait...

 

Wells

Look, I'm in a well!

Optional classes

Look, I'm in a well!
Look, I'm in a well!

Close icon

 

Default example

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. 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. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Media list

  • 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.

    Nested 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.

    Nested 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.

    Nested 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.
  • 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.

 

Examples and markup

Basic

Striped

Animated

Stacked

Options

Additional colors

Striped bars

 

Default alert

Warning! Best check yo self, you're not looking too good.

Options

Warning!

Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Contextual alternatives

Error or danger

Oh snap! Change a few things up and try submitting again.

Success

Well done! You successfully read this important alert message.

Information

Heads up! This alert needs your attention, but it's not super important.

 

Default thumbnails

Highly customizable

  • 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.

    Action Action

  • 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.

    Action Action

  • 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.

    Action Action

More examples

 

Hero unit

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

Learn more

Page header

 

Labels

LabelsMarkup
Default<span class="label">Default</span>
Success<span class="label label-success">Success</span>
Warning<span class="label label-warning">Warning</span>
Important<span class="label label-important">Important</span>
Info<span class="label label-info">Info</span>
Inverse<span class="label label-inverse">Inverse</span>

Badges

NameExampleMarkup
Default1<span class="badge">1</span>
Success2<span class="badge badge-success">2</span>
Warning4<span class="badge badge-warning">4</span>
Important6<span class="badge badge-important">6</span>
Info8<span class="badge badge-info">8</span>
Inverse10<span class="badge badge-inverse">10</span>

 

 

 

 

 

 

Default styles

Legend Example block-level help text here.

Optional layouts

Search form

Inline form

Horizontal form

Supported form controls

Inputs

Textarea

Checkboxes and radios

Default (stacked)


Inline checkboxes

Selects


Extending form controls

Prepended and appended inputs

Default options

@

.00

Combined

$ .00

Buttons instead of text

Button dropdowns

Segmented dropdown groups

Search form

Control sizing

Block level inputs

Relative sizing

Grid sizing

Uneditable inputs

Some value here

Form actions

Help text

Inline help

Inline help text

Block help

A longer block of help text that breaks onto a new line and may extend beyond one line.

Form control states

Input focus

Invalid inputs

Disabled inputs

Validation states

Something may have gone wrong
Please correct the error
Username is taken
Woohoo!

 

Inline

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

Basic block

<p>Sample text here...</p>

 

Standard pagination

Options

Disabled and active states

Sizes

Alignment

Pager

Default example

Aligned links

Optional disabled state

 

Overview and examples

Works with all button sizes

Split button dropdowns

Sizes

Dropup menus

 

Examples

Single button group

Multiple button groups

Vertical button groups

 

Default styles

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

Optional classes

.table-striped

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter

.table-bordered

#First NameLast NameUsername
1MarkOtto@mdo
MarkOtto@TwBootstrap
2JacobThornton@fat
3Larry the Bird@twitter

.table-hover

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

.table-condensed

#First NameLast NameUsername
1MarkOtto@mdo
2JacobThornton@fat
3Larry the Bird@twitter

Optional row classes

ClassDescription
.successIndicates a successful or positive action.
.errorIndicates a dangerous or potentially negative action.
.warningIndicates a warning that might need attention.
.infoUsed as an alternative to the default styles.
#ProductPayment TakenStatus
1TB - Monthly01/04/2012Approved
2TB - Monthly02/04/2012Declined
3TB - Monthly03/04/2012Pending
4TB - Monthly04/04/2012Call in to confirm

Supported table markup

TagDescription
<table>Wrapping element for displaying data in a tabular format
<thead>Container element for table header rows (<tr>) to label table columns
<tbody>Container element for table rows (<tr>) in the body of the table
<tr>Container element for a set of table cells (<td> or <th>) that appears on a single row
<td>Default table cell
<th>Special table cell for column (or row, depending on scope and placement) labels
<caption>Description or summary of what the table holds, especially useful for screen readers

 

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Body copy

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

Lead body copy

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Emphasis

<small>

This line of text is meant to be treated as fine print.

Bold

The following snippet of text is rendered as bold text.

Italics

The following snippet of text is rendered as italicized text.

Alignment classes

Left aligned text.

Center aligned text.

Right aligned text.

Emphasis classes

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Abbreviations

<abbr>

An abbreviation of the word attribute is attr.

<abbr class="initialism">

HTML is the best thing since sliced bread.

Addresses

<address>

Blockquotes

Default blockquote

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

Blockquote options

Naming a source

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

Someone famous in Source Title

Alternate displays

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

Someone famous in Source Title

Lists

Unordered

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Ordered

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem

Unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

Inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.

Horizontal description

Description lists
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

 

 

Default buttons

Buttonclass=""Description
btnStandard gray button with gradient
btn btn-primaryProvides extra visual weight and identifies the primary action in a set of buttons
btn btn-infoUsed as an alternative to the default styles
btn btn-successIndicates a successful or positive action
btn btn-warningIndicates caution should be taken with this action
btn btn-dangerIndicates a dangerous or potentially negative action
btn btn-inverseAlternate dark gray button, not tied to a semantic action or use
btn btn-linkDeemphasize a button by making it look like a link while maintaining button behavior

Button sizes

Block level

Disabled state

Primary link Link

One class, multiple tags

Link