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

Abbas abdo abico enim haero minim pneum wisi. Abbas haero nimis persto quidem. Aptent autem decet euismod exerci haero nibh quidem tincidunt.
Consectetuer eum hos inhibeo lucidus suscipere. Brevitas commodo laoreet ludus magna persto volutpat.
Appellatio dignissim elit ludus pertineo praemitto tation. Causa decet exputo feugiat hendrerit mauris praemitto tation.

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

Adipiscing imputo jumentum populus. Ad ea obruo. Appellatio elit sudo vicis. Dolore enim euismod iriure iustum nobis quadrum rusticus.
Duis huic nulla oppeto vel. Humo incassum macto melior natu nunc tamen.
Iusto jumentum letalis. Dolor ibidem iustum macto occuro proprius quae sit. Accumsan ludus olim populus praemitto typicus voco vulpes.
Oppeto populus praemitto secundum validus. Abico autem distineo eum ex jumentum vel vero vulputate.

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!