Layout tests

Responsive Table

Table

The .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px). When viewing on anything larger than 768px wide, there is no difference:

# Firstname Lastname Age City Country
1 Anna Pitt 35 New York USA

Glyphicons - set not fully available

Glyphicon Examples

Envelope icon:

Envelope icon as a link:

Search icon:

Search icon on a button:

Search icon on a styled button:

Print icon:

Print icon on a styled link button: Print

Tabs with dropdown menu

Toggleable / Dynamic Tabs

Dynamic Tabs

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.

HOME

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Read More... link

Simple Collapsible

Click on the button to toggle between showing and hiding content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Simple Collapsible

Click on the button to toggle between showing and hiding content.

Read more/less...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

 Well

Well

Basic Well

Horizontal Menu

Inline List

Too;tips

Tooltip Example

The data-placement attribute specifies the tooltip position.

PopIvers

Popover Example

 

head2

head3

large

small

button

head1

 

picture formats

 

 

 

 

Modal

Large Modal