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
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.
Read moreTables
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
.
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 999Tooltips & 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
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.
Panels
Basic panel example
Panels with headers, footers, bands and more blocks
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.
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.