References

Bootstrap 4 Changes to fit ELI
  • All rem Variables have been changed to em in order to force elements to take parent's sizes
  • Close Button has to include a Fa-times icon with its font-size
  • Cause of the em system, many paddings may differ cause of parent assigned fontSizes
  • Headings are not styled
  • We Have two modal Components BootStrap and featherLight
  • Modal fullScreen Classes with responsive variations ex:.modal-xl-fullscreen
Classes Naming
Icons we Use
Font Awesome

Alerts

Dismissible
Full content
Alert Colors

Badges

Example heading New

In Button
Badges Colors
primary secondary success info warning danger light dark pro-orange pro-green
Badges Pills
primary secondary success info warning danger light dark pro-orange pro-green

Breadcrumb

Buttons

disabled
active
btn-loading -- ELI custom --

disabled
active
btn-loading -- ELI custom --

Sizes
Check-boxes & Radios
Button Groups

Cards

With Colors
Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

Header

Primary card title

Some quick example text to build Some quick example text to build

With Colors
Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Header

Primary card title

Some quick example text to build and mak card's content.

Examples

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Boot Polish

Boot polish is a waxy paste, cream, or liquid used to polish, shine, and waterproof leather shoes

More

Sun Gone

Here are the top resources for all things related to the Sun.

Sun Gone Still Gone

Sun Gone

Sun disappears!
Photo of sunset

The sun disappeared behind the horizon today. Experts claim it could be gone for good!

Full Report
Sponsored Content

Ugg Boots

Best ugg boots on the planet. Free shipping, 24/7 customer service.

Sun Gone

The top resources for all things related to the Sun.

Sun Gone Still Gone
Sun Up

Looks like the Sun has returned. Here's why.

Card header

Special title treatment
Support card subtitle
Card image

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Code

Default code
<section>sdddd should be wrapped as inline.
Code with pre tag
            
          <p>Sample text here...</p>
          <p>And another line of sample text here...</p>
        
        
Var tag
y = m x + b
Kbd tag
To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,
Samp tag
This text is meant to be treated as sample output from a computer program.

Forms

Form's main elements
Legend
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
States
Success! You've done it.
Sorry, that username's taken. Try another?
Input sizes
Addons
$
.00
$ 0.00
Radio buttons (Simple)
Checkbox buttons (Simple)
Radio buttons form-check-inline(Simple)
Checkbox buttons form-check-inline(Simple)
Radio buttons (Custom)
Checkbox buttons (Custom)
Switch buttons (Custom)
Radio buttons custom-control-inline (Custom)
Checkbox buttons custom-control-inline (Custom)
Switch buttons custom-control-inline (Custom)
Form and button Alignment
Form Loading Wrapper -- ELI custom --
.u-formLoading

List group

Default list group
  • These Boots Are Made For Walking
  • These Boots Are Made For Walking
  • These Boots Are Made For Walking
  • These Boots Are Made For Walking
  • These Boots Are Made For Walking
List group with pills
  • These Boots Are Made For Walking 15
  • These Boots Are Made For Walking 15
  • These Boots Are Made For Walking 15
  • These Boots Are Made For Walking 15
  • These Boots Are Made For Walking 15
Button List group

Modals

Modal
Modal sm
Modal lg
Modal xl
Modal fullscreen -- ELI custom --

Navbars

Navs

Base Nav with Simplified Markup
nav-pills

Offcanvas

Offcanvas -- ELI custom --
Offcanvas-left
Offcanvas-right

Pagination

Pagination sm
Pagination lg

Popovers

Progress

25%
Colors
Multi
Animated

Spinners

Border
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Grow
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
In Button

Tables

Table Default
Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Table hover
Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Table bordered
Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Table striped
Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Table dark
Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Table borderless
Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Table sm
Header 1 Header 2 Header 3
Footer 1 Footer 2 Footer 3
Cell 1 Cell 2 Cell 3
Cell 1 Cell 2 Cell 3
Table with colored Heads thead-light
Header 1 Header 2 Header 3
Row table-light Row table-light Row table-light
Table with colored Heads thead-dark
Header 1 Header 2 Header 3
Row table-dark Row table-dark Row table-dark
Table with colored lines
Header 1 Header 2 Header 3
lines table-active lines table-active lines table-active
lines table-primary lines table-primary lines table-primary
lines table-secondary lines table-secondary lines table-secondary
lines table-success lines table-success lines table-success
lines table-info lines table-info lines table-info
lines table-warning lines table-warning lines table-warning
lines table-danger lines table-danger lines table-danger
lines table-light lines table-light lines table-light
lines table-dark lines table-dark lines table-dark
lines table-pro-orange lines table-pro-orange lines table-pro-orange
lines table-pro-green lines table-pro-green lines table-pro-green
Table with colored cells
Header 1 Header 2 Header 3
cells table-active cells table-active cells table-active
cells table-primary cells table-primary cells table-primary
cells table-secondary cells table-secondary cells table-secondary
cells table-success cells table-success cells table-success
cells table-info cells table-info cells table-info
cells table-warning cells table-warning cells table-warning
cells table-danger cells table-danger cells table-danger
cells table-light cells table-light cells table-light
cells table-dark cells table-dark cells table-dark
cells table-pro-orange cells table-pro-orange cells table-pro-orange
cells table-pro-green cells table-pro-green cells table-pro-green

Toasts

Tooltips

Typography inside entry content

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget Link urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Lists
  1. ol list (1)
  2. ol list (2)
  3. ol list (3)
  4. ol list (4)
  5. ol list (5)
    1. ol list (6)
    2. ol list (6.1)
    3. ol list (6.2)
    4. ol list (6.3)
    5. ol list (6.4)
    6. ol list (6.5)
  • ul list (1)
  • ul list (2)
  • ul list (3)
  • ul list (4)
  • ul list (5)
    • ul list (6)
    • ul list (6.1)
    • ul list (6.2)
    • ul list (6.3)
    • ul list (6.4)
    • ul list (6.5)
Description lists (dl)
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Figures
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Heading with muted text

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Example body text

Nullam quis risus eget Link urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following is rendered as bold text.

The following is rendered as italicized text.

An abbreviation of the word attribute is attr.

Lists
  1. ol list (1)
  2. ol list (2)
  3. ol list (3)
  4. ol list (4)
  5. ol list (5)
    1. ol list (6)
    2. ol list (6.1)
    3. ol list (6.2)
    4. ol list (6.3)
    5. ol list (6.4)
    6. ol list (6.5)
  • ul list (1)
  • ul list (2)
  • ul list (3)
  • ul list (4)
  • ul list (5)
    • ul list (6)
    • ul list (6.1)
    • ul list (6.2)
    • ul list (6.3)
    • ul list (6.4)
    • ul list (6.5)
Description lists (dl)
A description list is perfect for defining terms.
Euismod
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.
Donec id elit non mi porta gravida at eget metus.
Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Figures
A generic square placeholder image with rounded corners in a figure.
A caption for the above image.

Utilities

Text colors

.text-primary

.text-secondary

.text-success

.text-info

.text-warning

.text-danger

.text-light

.text-dark

.text-pro-orange

.text-pro-green

.text-body

.text-muted

.text-white

.text-black-50

.text-white-50

Background colors
.bg-primary
.bg-secondary
.bg-success
.bg-info
.bg-warning
.bg-danger
.bg-light
.bg-dark
.bg-pro-orange
.bg-pro-green
Font Sizes {rem} (Responsive variations) -- ELI custom --
fs-10 fs-11 fs-12 fs-13 fs-14 fs-15 fs-16 fs-17 fs-18 fs-19 fs-20 fs-21 fs-22 fs-23 fs-24 fs-25 fs-26 fs-27 fs-28 fs-29 fs-30
We can use fs-{breakpoint}-{number}
Font Sizes Relative to parent {em} (Responsive variations) -- ELI custom --
fsr-05 fsr-075 fsr-0875 fsr-10 fsr-11 fsr-12 fsr-13 fsr-14 fsr-15 fsr-16 fsr-17 fsr-18 fsr-19 fsr-20 fsr-21 fsr-22 fsr-23 fsr-24 fsr-25 fsr-26 fsr-27 fsr-28 fsr-29 fsr-30
We can use fsr-{breakpoint}-{number}
Letter Spacing -- ELI custom --
text-ls-10 text-ls-11 text-ls-12 text-ls-13 text-ls-14 text-ls-15 text-ls-16 text-ls-17 text-ls-18 text-ls-19 text-ls-20 text-ls-21 text-ls-22 text-ls-23 text-ls-24 text-ls-25 text-ls-26 text-ls-27 text-ls-28 text-ls-29 text-ls-30
Border colors
border border-primary border-secondary border-success border-info border-warning border-danger border-light border-dark border-pro-orange border-pro-green
Border Widths -- ELI custom --
border-0 border-w-1 border-w-2 border-w-3 border-w-4 border-w-5 border-w-6 border-w-7
Rounded
rounded
Sample image
rounded-circle
Sample image
rounded-pill
Sample image
rounded-0
Sample image
Loading More Wrapper -- ELI custom --
.u-wrapperLoading
random content
Sample image
random content
Sample image