Style guide

Type

Body text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, rerum perferendis quos aspernatur ullam eos voluptate quo cupiditate assumenda facilis, iste animi doloremque, quasi eveniet laboriosam. Dolor perferendis debitis dolore.

Repellendus laudantium, quas excepturi ducimus reiciendis, eligendi unde quia perspiciatis voluptatibus pariatur repellat quibusdam, molestiae cum quaerat ex a modi neque? Id officiis doloremque nisi, veritatis fugit fugiat eveniet placeat?

Officia, veniam. Molestias harum quasi, explicabo nesciunt fugit dicta provident natus veniam eveniet eos doloremque dolor, similique voluptates qui adipisci repudiandae iste sit nobis soluta error dolore accusamus fugiat, porro.

Body text large

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, rerum perferendis quos aspernatur ullam eos voluptate quo cupiditate assumenda facilis, iste animi doloremque, quasi eveniet laboriosam. Dolor perferendis debitis dolore.

Repellendus laudantium, quas excepturi ducimus reiciendis, eligendi unde quia perspiciatis voluptatibus pariatur repellat quibusdam, molestiae cum quaerat ex a modi neque? Id officiis doloremque nisi, veritatis fugit fugiat eveniet placeat?

Officia, veniam. Molestias harum quasi, explicabo nesciunt fugit dicta provident natus veniam eveniet eos doloremque dolor, similique voluptates qui adipisci repudiandae iste sit nobis soluta error dolore accusamus fugiat, porro.

Body text small

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, rerum perferendis quos aspernatur ullam eos voluptate quo cupiditate assumenda facilis, iste animi doloremque, quasi eveniet laboriosam. Dolor perferendis debitis dolore.

Repellendus laudantium, quas excepturi ducimus reiciendis, eligendi unde quia perspiciatis voluptatibus pariatur repellat quibusdam, molestiae cum quaerat ex a modi neque? Id officiis doloremque nisi, veritatis fugit fugiat eveniet placeat?

Officia, veniam. Molestias harum quasi, explicabo nesciunt fugit dicta provident natus veniam eveniet eos doloremque dolor, similique voluptates qui adipisci repudiandae iste sit nobis soluta error dolore accusamus fugiat, porro.

Headings and titles

This is a h1 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h2 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h3 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h4 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h5 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This is a h6 tag with some trailing text text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Icons

Font Icons

Uses the default text arrow glyphs

Nav Icons

Used for navbar. Check icons.php, menu.php in lib folder and navbar.scss assets/css folder or look at the navbar on tp and on your right.

Progress icons

Used for leson, course, quiz status inidicators

Default
In progress
Complete

Progress icons without labels

Buttons

Default

Link

Primary

Link

Secondary

Link

Link button

Link

Arrow buttons

Use .icon-font for icon

Default

Link

Primary

Link

Secondary

Link

Link button

Link

Circle buttons

Default

L

Primary

L

Secondary

L

Read more button

Read more

Tables

First Second Third
Hey Ho Let's go
Hey Ho Let's go
Hey Ho Let's go
Hey Ho Let's go
Hey Ho Let's go

Table with borders

Add .table-bordered for borders on all sides of the table and cells.

First Second Third
Hey Ho Let's go
Hey Ho Let's go
Hey Ho Let's go
Hey Ho Let's go
Hey Ho Let's go

Table with borders

Add .table-bordered and .table-bordered-rounded for borders on all sides of the table and cells and rounded corners.

First Second Third
Hey Ho Let's go
Hey Ho Let's go
Hey Ho Let's go

Responsive tables

Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally on small devices (under 768px).

First Second Third
Hey Ho Let's go
Hey Ho Let's go
Hey Ho Let's go

Forms

Inline form

Rounded form controls

Full background form controls

"Underline" form controls

Checkboxes and radios

Inline checkoxes and radios

Styled checkboxes and radios

Uses iCheck.js

Form validation

Add classes .has-success, .has-warning and .has-danger to .form-group to give visual validation of inputs.

Input groups

Meida object

The media object helps build complex and repetitive components where some media is positioned alongside content.

Media title

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Media list

Wrap .media in .media-list. You can use it on ul also.

  • Media title

    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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Media title

    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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Navs

Inline navigation

Navigation with a separator

Navigation justified

Navigation pills

Navigation pills compact

Navigation tabs

Alerts

Alerts with contextual feedback

Alerts with extra elements

Use href and .alert-link (.alert-link class gets floated to the right).

Cards

Cards Default

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio consequatur soluta voluptates reiciendis pariatur nihil. Natus pariatur ex, animi maxime tenetur minima, ad quia neque, saepe vitae adipisci, sequi! Iste.

Provident itaque assumenda quibusdam error maiores suscipit iste, saepe similique eius, placeat deleniti eveniet animi quia in libero recusandae ullam architecto fugiat quam facere ipsa autem! Distinctio, hic voluptate dolores.

Cards with a header and footer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt maiores, magnam. Quis soluta iste quaerat rerum necessitatibus aliquid, cumque iusto minima dolorem, quia, suscipit est reprehenderit vel dolor ipsum voluptatibus!

Read more

Atque voluptatibus assumenda inventore in soluta, necessitatibus minima voluptatum temporibus itaque unde, mollitia impedit incidunt nulla suscipit repellendus, at eos doloremque praesentium consectetur maxime. Fugit aliquid unde tenetur repellat perspiciatis. In laboriosam fuga quas, quaerat quos officia et, voluptatibus ipsum blanditiis odit ab commodi? Eius facere, possimus tempore minima ab pariatur illum amet! Nesciunt quae consequuntur porro. Nihil, adipisci voluptates.

Read more

Cards with images

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Read more

Cards with horizontal rows

Use .card-horizontal-sm, .card-horizontal-md, .card-horizontal-lg with .card-row to split it in to two columns. Use .card-row-img-left or .card-row-img-right for image placement.

Card variants

Card sizes

Card medium

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Card large

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit quisquam quis suscipit facere alias quo fugiat ex molestiae aliquid, possimus, tenetur dicta. Quisquam optio deserunt rem debitis iste, ullam.

Amet architecto ea ipsam, voluptatem quasi. Cum, cupiditate dolorem alias. Aliquid voluptatibus voluptates cupiditate enim excepturi tempore odio necessitatibus sunt laboriosam ducimus accusantium, quidem vero maxime facere cum ad laborum!Mollitia amet deserunt, sapiente, ab ut optio. Pariatur ipsam beatae, ratione nulla, at ut, quibusdam ea tempora explicabo numquam recusandae commodi sequi. Nihil molestiae quod possimus facere! Dolor mollitia, delectus!

Nihil quo voluptas sunt assumenda nisi quibusdam animi ab unde recusandae accusamus optio non dolor suscipit, tenetur veniam aspernatur totam odit nulla asperiores amet magni expedita architecto tempore! Adipisci, consectetur!

Dicta dignissimos doloremque sapiente culpa reiciendis asperiores eius error, alias quibusdam ratione! Veritatis esse nisi voluptatem suscipit perspiciatis unde eveniet omnis deserunt sequi, quasi reiciendis adipisci sit quod harum cumque!Quam animi doloremque, provident, officia molestias modi dolorem ea blanditiis voluptatem ducimus odio optio quia quos velit minima? Amet, et velit ut odit quod iure porro impedit ipsa ullam cum.

Eaque aperiam, laboriosam molestias animi quas perferendis ipsam voluptate laborum aliquam unde aut voluptas vero nam placeat maiores excepturi ex aliquid consequatur quae earum at corrupti repellat? Quisquam, officia, amet.Dolor totam quas provident id ex a tempore dignissimos magnam, eveniet ratione fugiat, error dolore iusto. Incidunt animi, fuga harum modi a blanditiis sint at error iure, consectetur ipsum enim.

Labore deleniti placeat minus quibusdam debitis, voluptate commodi pariatur non temporibus fugiat dicta necessitatibus, alias aperiam perspiciatis id eveniet laboriosam at aut quia doloremque dolor. In neque ut praesentium facilis.

Impedit minus, adipisci explicabo eligendi iusto, error, animi quos ex omnis at molestias ratione nesciunt aut earum fugit voluptates accusamus mollitia facilis quas consequatur sunt quia similique odio. Expedita, et.

Possimus laudantium velit, sapiente quod, corrupti esse voluptates tenetur ad doloremque. Eum dolores placeat aliquam dolorem, est possimus. Nemo ipsam nihil, eveniet iste dignissimos error explicabo ex quia, ut tempore. Perferendis reiciendis, molestias placeat cumque, illo ex illum animi ducimus adipisci tenetur doloremque libero vitae. Quia voluptas aliquam commodi magni reiciendis ullam repudiandae blanditiis accusantium impedit, natus suscipit quae id!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit quisquam quis suscipit facere alias quo fugiat ex molestiae aliquid, possimus, tenetur dicta. Quisquam optio deserunt rem debitis iste, ullam.

Amet architecto ea ipsam, voluptatem quasi. Cum, cupiditate dolorem alias. Aliquid voluptatibus voluptates cupiditate enim excepturi tempore odio necessitatibus sunt laboriosam ducimus accusantium, quidem vero maxime facere cum ad laborum!Mollitia amet deserunt, sapiente, ab ut optio. Pariatur ipsam beatae, ratione nulla, at ut, quibusdam ea tempora explicabo numquam recusandae commodi sequi. Nihil molestiae quod possimus facere! Dolor mollitia, delectus!

Nihil quo voluptas sunt assumenda nisi quibusdam animi ab unde recusandae accusamus optio non dolor suscipit, tenetur veniam aspernatur totam odit nulla asperiores amet magni expedita architecto tempore! Adipisci, consectetur!

Dicta dignissimos doloremque sapiente culpa reiciendis asperiores eius error, alias quibusdam ratione! Veritatis esse nisi voluptatem suscipit perspiciatis unde eveniet omnis deserunt sequi, quasi reiciendis adipisci sit quod harum cumque!Quam animi doloremque, provident, officia molestias modi dolorem ea blanditiis voluptatem ducimus odio optio quia quos velit minima? Amet, et velit ut odit quod iure porro impedit ipsa ullam cum.

Eaque aperiam, laboriosam molestias animi quas perferendis ipsam voluptate laborum aliquam unde aut voluptas vero nam placeat maiores excepturi ex aliquid consequatur quae earum at corrupti repellat? Quisquam, officia, amet.Dolor totam quas provident id ex a tempore dignissimos magnam, eveniet ratione fugiat, error dolore iusto. Incidunt animi, fuga harum modi a blanditiis sint at error iure, consectetur ipsum enim.

Labore deleniti placeat minus quibusdam debitis, voluptate commodi pariatur non temporibus fugiat dicta necessitatibus, alias aperiam perspiciatis id eveniet laboriosam at aut quia doloremque dolor. In neque ut praesentium facilis.

Impedit minus, adipisci explicabo eligendi iusto, error, animi quos ex omnis at molestias ratione nesciunt aut earum fugit voluptates accusamus mollitia facilis quas consequatur sunt quia similique odio. Expedita, et.

Possimus laudantium velit, sapiente quod, corrupti esse voluptates tenetur ad doloremque. Eum dolores placeat aliquam dolorem, est possimus. Nemo ipsam nihil, eveniet iste dignissimos error explicabo ex quia, ut tempore. Perferendis reiciendis, molestias placeat cumque, illo ex illum animi ducimus adipisci tenetur doloremque libero vitae. Quia voluptas aliquam commodi magni reiciendis ullam repudiandae blanditiis accusantium impedit, natus suscipit quae id!

Duis aute irure dolor in reprehenderit

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed impedit quisquam quis suscipit facere alias quo fugiat ex molestiae aliquid, possimus, tenetur dicta. Quisquam optio deserunt rem debitis iste, ullam.

Amet architecto ea ipsam, voluptatem quasi. Cum, cupiditate dolorem alias. Aliquid voluptatibus voluptates cupiditate enim excepturi tempore odio necessitatibus sunt laboriosam ducimus accusantium, quidem vero maxime facere cum ad laborum!Mollitia amet deserunt, sapiente, ab ut optio. Pariatur ipsam beatae, ratione nulla, at ut, quibusdam ea tempora explicabo numquam recusandae commodi sequi. Nihil molestiae quod possimus facere! Dolor mollitia, delectus!

Nihil quo voluptas sunt assumenda nisi quibusdam animi ab unde recusandae accusamus optio non dolor suscipit, tenetur veniam aspernatur totam odit nulla asperiores amet magni expedita architecto tempore! Adipisci, consectetur!

Dicta dignissimos doloremque sapiente culpa reiciendis asperiores eius error, alias quibusdam ratione! Veritatis esse nisi voluptatem suscipit perspiciatis unde eveniet omnis deserunt sequi, quasi reiciendis adipisci sit quod harum cumque!Quam animi doloremque, provident, officia molestias modi dolorem ea blanditiis voluptatem ducimus odio optio quia quos velit minima? Amet, et velit ut odit quod iure porro impedit ipsa ullam cum.

Eaque aperiam, laboriosam molestias animi quas perferendis ipsam voluptate laborum aliquam unde aut voluptas vero nam placeat maiores excepturi ex aliquid consequatur quae earum at corrupti repellat? Quisquam, officia, amet.Dolor totam quas provident id ex a tempore dignissimos magnam, eveniet ratione fugiat, error dolore iusto. Incidunt animi, fuga harum modi a blanditiis sint at error iure, consectetur ipsum enim.

Labore deleniti placeat minus quibusdam debitis, voluptate commodi pariatur non temporibus fugiat dicta necessitatibus, alias aperiam perspiciatis id eveniet laboriosam at aut quia doloremque dolor. In neque ut praesentium facilis.

Impedit minus, adipisci explicabo eligendi iusto, error, animi quos ex omnis at molestias ratione nesciunt aut earum fugit voluptates accusamus mollitia facilis quas consequatur sunt quia similique odio. Expedita, et.

Possimus laudantium velit, sapiente quod, corrupti esse voluptates tenetur ad doloremque. Eum dolores placeat aliquam dolorem, est possimus. Nemo ipsam nihil, eveniet iste dignissimos error explicabo ex quia, ut tempore. Perferendis reiciendis, molestias placeat cumque, illo ex illum animi ducimus adipisci tenetur doloremque libero vitae. Quia voluptas aliquam commodi magni reiciendis ullam repudiandae blanditiis accusantium impedit, natus suscipit quae id!

Card large for single lesson/product

Badges

Highlight new or unread items by adding a span.badge to links in .navbar-nav-icon

1 2 3 4 5 6 7 8 9 10 11 999

Tooltips & Popovers

Special toggle links

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Animi doloremque, eos sit maxime veniam mollitia, ab perspiciatis voluptatibus veritatis excepturi, esse temporibus earum amet nam tempore pariatur aliquid nulla? Minus dignissimos asperiores perferendis eligendi vel incidunt recusandae nam explicabo quia mollitia. Fugit asperiores, alias expedita et pariatur qui quia, id omnis, labore quaerat odit voluptate voluptates optio. Dignissimos, vitae laborum tenetur cum ratione enim ullam dolor id iusto optio aliquam, sed totam repellendus odit voluptatibus saepe dolorem, laboriosam molestias ea. Dolore aperiam reprehenderit dolorem unde iure, asperiores, quibusdam eius fugit laborum! Assumenda repudiandae esse accusantium voluptate adipisci obcaecati id totam, unde incidunt. Eveniet odio ad reprehenderit fuga repellendus a, quidem qui, neque est hic animi quisquam, earum accusantium, dicta deleniti dignissimos quis. Harum totam explicabo ab enim omnis, aperiam perspiciatis, nostrum ipsam ratione, eum eligendi. Unde enim sunt, voluptates similique perspiciatis tempora repellat.

Dignissimos tempore consequuntur, mollitia ex et, officia. Veniam dolorum a omnis in maxime libero? Suscipit sed perferendis quae eligendi sit reprehenderit dicta id at sequi iusto reiciendis repellat quis, sunt qui voluptas a voluptates assumenda molestias error. Illo!

Progress bars

60% Complete

Progress bar with text

60% Complete

Progress bar striped

60% Complete

Contextual variations

60% Complete
70% Complete
80% Complete
90% Complete

progres group

Bar with a label

60% Complete
Some text

Pagination and pager

Pagination (multiple pages)

Pager (next and prev link)

Use .btn classes to style pagination links.

Pager compact

Panels

Basic panel example

Panels with headers, footers, bands and more blocks

Panel header without title

Some text

Some content

Another title

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another title

Some text with background

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another title

Collapsable panel groups

Wrap panels in .panel-group and use colapse.js to make them collapse

Collapsers are bellow

Another title

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another title

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accordion

For accordion add data-parent attribute with the id of .panel-grup

Accordion

Another title

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another title

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Toggle icons instead of text

Toggle icons collapser

Another title

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Another title

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Some text

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.