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.

Headings

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.

Titles

Use .title class on any element to make it look like a heading.

This is a <p> pretending to be a heading.

There are also title modifiers:

Icons

Font Icons

Uses the default text arrow glyphs

SVG Icons

Nav Icons

Used for navbar. Check icons.php, menu.php in lib folder.

Progress icons

Used for lesson, course, quiz status indicators

Progress icons without labels

Buttons

Default

Primary

Secondary

Link button

Icons in buttons

We have two options for icons:

• Use .icon-font for icon.
• Use svg for icon.

Default

Primary

Secondary

Link button

Circle buttons

NOTE: This modifier is not compatible with any other button class modifier except the color modifiers (.btn-default, .btn-primary, .btn-secondary).

Default

Primary

Secondary

Read more button

NOTE: This modifier is not compatible with any other button class modifier.

Tables

Table with borders

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

Table with borders

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

Responsive tables

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

Forms

Inline form

Rounded form controls

Full background form controls

"Underline" form controls

Checkboxes and radios

Inline checkoxes and radios

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

• Home
• Profile
• Messages

Navigation pills

• Home
• Profile
• Messages

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

The .card class adds some styling and resets top margin from each first child and bottom margin from each last child but it doesn't add padding. Use .card-block to add a section with padding inside .card.

Cards with optional sub elements

You can add the following elements in .card or .card-block:

• .card-body
• .card-header
• .card-content
• .card-footer

These elements have some spacing applied to them and they reset top margin from each first child and bottom margin from each last child.

Cards with images

Use .card-img-wrap to wrap your <img>.

Lorem ipsum dolor sit amet

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

Horizontal cards

• Add .card-horizontal to .card.
• Add .card-row in .card.
• Add .card-img-wrap and .card-block inside .card-row

You can also use .card-horizontal-sm and .card-horizontal-md to apply the horizontal layout on specific breakpoints.

22.06.2016.

Excepteur sint occaecat

Read more

Footer text

Badges

Bullets

Bullet

Bullet

Bullet

Bullet

Bullet

Bullet

Bullet

Bullet

Bullet

Bullet

Bullet

Bullet

Tooltips & Popovers

Click to toggle popover

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

Contextual variations

Success

Info

Warning

Danger

Progress group

Bar with a label

Progress rings

Contextual variations

Pagination and pager

Pagination (multiple pages)

Pager (next and prev link)

Use .btn classes to style pagination links.

• Previous
• Next

Panels

Panels with headers, footers, bands and more blocks

Collapsable panel groups

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

Accordion

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

Toggle icons instead of text

Dropdowns

Sliders

Built with Swiper.

To init add a class .slider to .swiper-container or init manualy writtng your own JavaScript. Check the docs for more info.

Modals

We're using a modified version of Bootstrap modal. Because we have a fixed navbar at some point we've modified the JavaScript so it adds margin-right or padding-right to some fixed elements in order to account for the scrollbar so the fixed elements don't move when the modal opens.