Skip to content

Theme Elements

AppStrap contains all the standard Twitter Bootstrap goodies and more, here's a quick overview of some of the key elements.

Buttons

Default

Mini
Small

Medium

Large

Buttons Dropdown

Toggles Powered by Bootstrap Switch.

Sizes
On / Off Colours

Simply add data data-toggle="switch" to any radio or checkbox element:

          Example:
          
<input type="checkbox" data-toggle="switch" checked>

Find more examples at Bootstrap Switch.

Accordion

Default

Commodo consequat defui diam humo importunus interdico populus. Esca ibidem ille laoreet sagaciter veniam voco ymo.
Camur humo letalis modo os. Aptent damnum diam dolore eu immitto nobis persto saepius sed.
Antehabeo eligo facilisis magna melior nunc ratis refoveo utinam. Causa exerci quia sed si sit.

You can apply all default Bootstrap panel styles to individual panels as well ie. .panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger.

List Style

Abbas caecus elit importunus ludus nimis quia tamen ulciscor. Acsi blandit defui eu gilvus immitto verto virtus.
Aliquip amet in loquor quadrum refoveo roto saepius zelus. Abigo os patria.
Comis gilvus incassum obruo probo quis ullamcorper. Capto enim nutus quadrum secundum.
Rusticus suscipere torqueo. Abico eu humo nibh nisl obruo vereor virtus. Erat ideo incassum nimis olim qui saepius valde.

Carousel

Alerts

Nothing much happening!

Just saying......

Looking good!

All systems are go!!

Warning!

Danger, High voltage!!

Error!

Server meltdown pending!!!

Typography

Jumbotron (.jumbotron)

Oi! Look at me!!

Integer. Tortor enim, phasellus aliquam! Turpis urna egestas et rhoncus elementum habitasse, quis! Auctor dolor et, tortor ridiculus facilisis integer integer! A odio pellentesque, velit placerat cras ultricies elementum lundium.

Learn more

Tables

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

Responsive Text Size

Screen xs
.font-xs-x1
.font-xs-x2
.font-xs-x3
.font-xs-x4
.font-xs-x5
.font-xs-x6
.font-xs-x7
.font-xs-x8
.font-xs-x9
.font-xs-x10
Screen sm
.font-sm-x1
.font-sm-x2
.font-sm-x3
.font-sm-x4
.font-sm-x5
.font-sm-x6
.font-sm-x7
.font-sm-x8
.font-sm-x9
.font-sm-x10
Screen md
.font-md-x1
.font-md-x2
.font-md-x3
.font-md-x4
.font-md-x5
.font-md-x6
.font-md-x7
.font-md-x8
.font-md-x9
.font-md-x10
Screen lg
.font-lg-x1
.font-lg-x2
.font-lg-x3
.font-lg-x4
.font-lg-x5
.font-lg-x6
.font-lg-x7
.font-lg-x8
.font-lg-x9
.font-lg-x10
Example:

Resize the page to see me change

          <h2 class="font-xs-x2 font-md-x3">Resize the page to see me change</h2>
        

Quotes

"It's totally awesome, we're could imagine life without it!"

Fancy Text (.fancy)

Normal text with something a bit fancy can be nice!.

Text Spacers (.spacer)

Please // give // me // some // space!

Icons Included:

180 Bootstrap 3 Glyphicons

439 Font Awesome Icons

Flag Icons

Useful tools

Horizontal Tabs

Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.

Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.

Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!

Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.

Vertical Tabs

Dignissim tincidunt mattis lorem, sagittis nisi, amet ut pulvinar lectus cursus ac! Enim turpis odio dis. Non ut vel, nisi dapibus? Velit augue tortor, ut ac ac nec tortor nec, mauris massa.

Aliquet risus, penatibus, ac integer ultricies ultricies elementum augue proin habitasse placerat. Nunc habitasse duis, elementum, porttitor porta? Purus, ac odio. Habitasse, egestas vut.

Turpis elit, egestas nec etiam! Porta parturient amet! Eros aenean sit lacus sagittis massa? Massa a nunc! Nisi vut! Lundium, dictumst, nunc enim, natoque, cras nec, dictumst et rhoncus!

Dignissim enim in vel urna tortor nascetur rhoncus parturient ultricies, purus lundium velit nec arcu et dolor vel.

Pagination

Code Syntax Highlighting

          p { color: red; }
        
          <h2 class="font-xs-x2 font-md-x3">AppStrap</h2>
        
More examples on prismjs.com.

Tool Tip (data-toggle="tooltip")

Tooltip can really useful, maybe on top, or below or even left or right.

Popovers (data-toggle="popover")

Popovers are also really useful to explain something when you have a bit more to say, maybe on top, or below or even left or right.

Modals (data-toggle="modal")

For full requirements see: http://getbootstrap.com/javascript/#modals

Login or Sign Up
99.9% Uptime // Free upgrade assistence // 24/7 Support // Plans from $19.99/month // Start your Free Trial Today!