Preset Styles

orange

orange

green

red

orange

Bootstrap Theme

Bootstrap is the solid theme based on Expose, our fast and slick theme framwork! It takes full advantage of all the latest Expose features like semantic xHTML markup, a nice and clean administration UI, Xpert Mega Menu and much more.

Bootstrap is an optimized and streamlined theme and serves as blueprint to build your own custom themes. It offers 4 different theme styles to get you started right away. Every bits of codes are well documented and we've added Less files which make your customization more faster.

Module Positions

Expose Module Positions

Module Variations

This theme comes with different module styles, badges and icons. For each module you can pick a style and combine it with an icon or badge to create your own unique look. Enter any available suffixes at Extensions → Module Manager → Module → Module Class Suffix. Here is a list of the available options:

Box Styles box1-9
Title Styles title1-9
Badges Hot, New, Free, Top

There are some other classes which override some default styles like:

Nostyle Remove margin and padding from block
Nomargin Remove margin block
Nopad Remove padding from block

Template Typography

Typography is a fundamental part of a template, providing you with the tools to characterize your content and bring it to life. Expose integrated and nicely blended with Bootstrap's Typography to enhance your typography experience.

If you are using the TinyMCE editor for HTML typography, go to Extensions → Plugin Manager → TinyMCE 2.0 → Set Code Clean-up on Save to Never.

Heading Style

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Default List Style

Unordered List

  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Vestibulum laoreet porttitor sem
  • Faucibus porta lacus fringilla vel

Ordered List

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet

Typographic components Page header and hero unit for segmenting content

Expose provides a lightweight, flexible component called a hero unit to showcase content on your site. It works well on marketing and content-heavy sites.

Markup

Wrap your content in a div like so:

  1. <div class="hero-unit">
  2. <h1>Heading</h1>
  3. <p>Tagline</p>
  4. <p>
  5. <a class="btn btn-primary btn-large">
  6. Learn more
  7. </a>
  8. </p>
  9. </div>

Hello, world!

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

Learn more

Blockquotes

  1. <blockquote>
  2. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis.</p>
  3. <small>Someone famous</small>
  4. </blockquote>

Default blockquotes are styled as such:

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

Someone famous in Body of work

To float your blockquote to the right, add class="pull-right":

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

Someone famous in Body of work

Code Inline and block code snippets

This is a sample <pre>...</pre> tag:

div.ex-block div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.ex-block div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}
This is a sample <pre class="prettyprint">...</pre> tag:

div.ex-block div.bx1 {
  background: url(../images/box_bl.png) 0 100% repeat;
}

div.ex-block div.bx2 {
  background: url(../images/box_tr.png) 100% 0 repeat;
}

Inline labels Label and annotate text

Labels Markup
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>

Alerts Styles for success, warning, and error messages

This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-error">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-success">....</div>
This is a sample of the Approved style. To replicate, use the following syntax: <div class="alert alert-info">....</div>

Nav, tabs, and pills Highly customizable list-style navigation

Stacked tabs

  1. <ul class="nav nav-tabs nav-stacked">
  2. ...
  3. </ul>

Stacked pills

  1. <ul class="nav nav-pills nav-stacked">
  2. ...
  3. </ul>

Example nav list

Take a list of links and add class="nav nav-list":

  1. <ul class="nav nav-list">
  2. <li class="nav-header">
  3. List header
  4. </li>
  5. <li class="active">
  6. <a href="#">Home</a>
  7. </li>
  8. <li>
  9. <a href="#">Library</a>
  10. </li>
  11. ...
  12. </ul>

Example with icons

Same example, but with <i> tags for icons.

  1. <ul class="nav nav-list">
  2. ...
  3. <li>
  4. <a href="#">
  5. <i class="icon-book"></i>
  6. Library
  7. </a>
  8. </li>
  9. ...
  10. </ul>

Icons Text style

  • icon-glass
  • icon-music
  • icon-search
  • icon-envelope
  • icon-heart
  • icon-star
  • icon-star-empty
  • icon-user
  • icon-film
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-ok
  • icon-remove
  • icon-zoom-in
  • icon-zoom-out
  • icon-off
  • icon-signal
  • icon-cog
  • icon-trash
  • icon-home
  • icon-file
  • icon-time
  • icon-road
  • icon-download-alt
  • icon-download
  • icon-upload
  • icon-inbox
  • icon-play-circle
  • icon-repeat
  • icon-refresh
  • icon-list-alt
  • icon-lock
  • icon-flag
  • icon-headphones
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-qrcode
  • icon-barcode
  • icon-tag
  • icon-tags
  • icon-book
  • icon-bookmark
  • icon-print
  • icon-camera
  • icon-font
  • icon-bold
  • icon-italic
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-list
  • icon-indent-left
  • icon-indent-right
  • icon-facetime-video
  • icon-picture
  • icon-pencil
  • icon-map-marker
  • icon-adjust
  • icon-tint
  • icon-edit
  • icon-share
  • icon-check
  • icon-move
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-play
  • icon-pause
  • icon-stop
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-chevron-left
  • icon-chevron-right
  • icon-plus-sign
  • icon-minus-sign
  • icon-remove-sign
  • icon-ok-sign
  • icon-question-sign
  • icon-info-sign
  • icon-screenshot
  • icon-remove-circle
  • icon-ok-circle
  • icon-ban-circle
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-arrow-down
  • icon-share-alt
  • icon-resize-full
  • icon-resize-small
  • icon-plus
  • icon-minus
  • icon-asterisk
  • icon-exclamation-sign
  • icon-gift
  • icon-leaf
  • icon-fire
  • icon-eye-open
  • icon-eye-close
  • icon-warning-sign
  • icon-plane
  • icon-calendar
  • icon-random
  • icon-comment
  • icon-magnet
  • icon-chevron-up
  • icon-chevron-down
  • icon-retweet
  • icon-shopping-cart
  • icon-folder-close
  • icon-folder-open
  • icon-resize-vertical
  • icon-resize-horizontal

Buttons

Button Class Description
.btn Standard gray button with gradient
.btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
.btn-info Used as an alternate to the default styles
.btn-success Indicates a successful or positive action
.btn-warning Indicates caution should be taken with this action
.btn-danger Indicates a dangerous or potentially negative action
.btn-inverse Alternate dark gray button, not tied to a semantic action or use

Multiple sizes

Fancy larger or smaller buttons? Add .btn-large, .btn-small, or .btn-mini for two additional sizes.

Button with icons

Refresh Checkout Delete

Comment Settings More Info

Tables For, you guessed it, tabular data

1. Default table styles

Tables are automatically styled with only a few borders to ensure readability and maintain structure. With 2.0, the .table class is required.

<table class="table">
  …
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML

2. Striped table

Get a little fancy with your tables by adding zebra-striping—just add the .table-striped class.

Note: Striped tables use the :nth-child CSS selector and is not available in IE7-IE8.

<table class="table table-striped">
  …
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML

3. Bordered table

Add borders around the entire table and rounded corners for aesthetic purposes.

<table class="table table-bordered">
  …
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent
3 Brosef Stalin HTML

4. Condensed table

Make your tables more compact by adding the .table-condensed class to cut table cell padding in half (from 8px to 4px).

<table class="table table-condensed">
  …
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML

5. Combine them all!

Feel free to combine any of the table classes to achieve different looks by utilizing any of the available classes.

<table class="table table-striped table-bordered table-condensed">
  ...
</table>
# First Name Last Name Language
1 Mark Otto CSS
2 Jacob Thornton Javascript
3 Stu Dent HTML
4 Brosef Stalin HTML