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.

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:

Class Example
title-xs This is title xs
title-sm This is title sm
title-md This is title md
title-lg This is title lg
title-xl This is title xl

Icons

Font Icons

Uses the default text arrow glyphs

SVG Icons

Icon File name
icon-close.svg
icon-filter.svg
icon-check.svg

Nav Icons

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

Icon File name
icon-icon-book.svg
icon-icon-cart.svg
icon-icon-certificate.svg
icon-icon-door.svg
icon-icon-lang.svg
icon-icon-note.svg
icon-icon-pad.svg
icon-icon-plan.svg
icon-icon-ribbon.svg
icon-icon-search.svg
icon-icon-shop.svg
icon-icon-star.svg
icon-icon-user.svg

Progress icons

Used for lesson, course, quiz status indicators

Default
In progress
Complete

Progress icons without labels

Buttons

Default

Link

Primary

Link

Secondary

Link

Link button

Link

Icons in buttons

We have two options for icons:

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

Default

Font icon

Link

SVG icon

Link

Primary

Font icon

Link

SVG icon

Link

Secondary

Font icon

Link

SVG icon

Link

Link button

Font icon

Link

SVG icon

Link

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

L

Primary

L

Secondary

L

Read more button

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

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

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

Navigation pills

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.

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 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.

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.

Cards with images

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

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.

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.

Badges

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

Contextual variations

Success

50% Complete

Info

60% Complete

Warning

70% Complete

Danger

80% Complete

Progress group

Bar with a label

60% Complete
Some text

Progress rings

20%
40%
60%
80%

Contextual variations

20%
40%
60%
80%

Pagination and pager

Pagination (multiple pages)

Pager (next and prev link)

Use .btn classes to style pagination links.

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.

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.

Slide 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Vitae ultricies leo integer malesuada nunc vel risus commodo. Sit amet luctus venenatis lectus magna fringilla urna porttitor rhoncus. Mi sit amet mauris commodo quis imperdiet massa tincidunt.

Slide 2

Atque natus harum minima dolorum, perspiciatis consectetur alias consequuntur? Laborum. Atque natus harum minima dolorum, perspiciatis consectetur alias consequuntur? Laborum. Atque natus harum minima dolorum, perspiciatis consectetur alias consequuntur? Laborum. Atque natus harum minima dolorum, perspiciatis consectetur alias consequuntur? Laborum.

Slide 3

Orci porta non pulvinar neque laoreet suspendisse interdum consectetur. Pellentesque adipiscing commodo elit at. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis. Eu augue ut lectus arcu bibendum at varius vel pharetra. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo nulla. Bibendum arcu vitae elementum curabitur.

Slide 4

At auctor urna nunc id cursus metus aliquam eleifend. Magna etiam tempor orci eu lobortis elementum nibh tellus molestie. Venenatis a condimentum vitae sapien pellentesque habitant morbi tristique. Velit scelerisque in dictum non consectetur a erat nam at. Est lorem ipsum dolor sit.

Slide 5

Elementum nibh tellus molestie nunc non. Elit at imperdiet dui accumsan sit amet nulla facilisi. Eget gravida cum sociis natoque penatibus. Mauris pharetra et ultrices neque ornare aenean euismod elementum nisi. Feugiat nibh sed pulvinar proin gravida hendrerit lectus. Non odio euismod lacinia at quis risus. Vitae ultricies leo integer malesuada.

Slide 6

Integer vitae justo eget magna. Convallis a cras semper auctor neque vitae. Odio euismod lacinia at quis risus sed vulputate. Blandit massa enim nec dui nunc mattis enim ut tellus. Dignissim enim sit amet venenatis urna cursus eget.

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.