Loading...

Components

  • Dashboard
  • Inner Page
  • Alerts

    Loader

    Loading...
    Loading...
    Loading...
    Loading...
    Loading...
    Loading...
    Loading...
    Loading...

    Toasts

    Toggle 'fade show' classes from 'toast' classed div from below to hide and show toast.

    Modals

    Breadcrumbs

    Buttons

    Default Button


    Button Sizes


    Button Groups




    Cards

    Card with image and links

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

    Card linkAnother link
    Card with image and button

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

    Go somewhere
    Card with image and list
    • Cras justo odio
    • Dapibus ac facilisis in
    • Vestibulum at eros
    Card with links

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

    Card linkAnother link
    Card with button

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

    Go somewhere
    Card with list
    • Cras justo odio
    • Dapibus ac facilisis in
    • Vestibulum at eros
    This is my header
    Special title treatment

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

    Go somewhere
    Card with tabs

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

    Go somewhere
    Card with tabs

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

    Go somewhere
    Card with tabs

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

    Go somewhere
    Card with pills

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

    Go somewhere
    Card with pills

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

    Go somewhere
    Card with pills

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

    Go somewhere

    Dropdowns

    Dropdowns within Text


    Dropdowns within Buttons


    Split button dropdowns

    Pagination

    Progress

    Large Progress Bars
    Default Progress Bars
    Medium Progress Bars
    Small Progress Bars
    Extra Small Progress Bars

    Tabs

    Basic tabs

    Tab content 1
    Tab content 2
    Tab content 3

    Basic justified tabs

    Tab content 1
    Tab content 2
    Tab content 3
    Tab content 4

    Top line tabs

    Tab content 1
    Tab content 2
    Tab content 3

    Top line justified

    Tab content 1
    Tab content 2
    Tab content 3
    Bottom line tabs
    Tab content 1
    Tab content 2
    Tab content 3
    Bottom line justified
    Tab content 1
    Tab content 2
    Tab content 3

    Solid tabs

    Tab content 1
    Tab content 2
    Tab content 3

    Solid justified

    Tab content 1
    Tab content 2
    Tab content 3

    Solid Rounded

    Tab content 1
    Tab content 2
    Tab content 3

    Rounded justified

    Tab content 1
    Tab content 2
    Tab content 3

    Typography

    Headings

    h1. Bootstrap heading

    h2. Bootstrap heading

    h3. Bootstrap heading

    h4. Bootstrap heading

    h5. Bootstrap heading
    h6. Bootstrap heading

    Blockquotes

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

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

    Text elements

    You can use the mark tag to highlight text.

    This line of text is meant to be treated as deleted text.

    This line of text is meant to be treated as no longer accurate.

    This line of text is meant to be treated as an addition to the document.

    This line of text will render as underlined

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

    This line rendered as bold text.

    This line rendered as italicized text.

    This is in monospace

    Coloured Link

    .text-primary

    .text-secondary

    .text-success

    .text-danger

    .text-warning

    .text-info

    .text-light

    .text-dark

    .text-muted

    .text-white

    Bullet Lists

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem

    Bullet Lists

    1. Lorem ipsum dolor sit amet
    2. Consectetur adipiscing elit
    3. Integer molestie lorem at massa
    4. Facilisis in pretium nisl aliquet
    5. Nulla volutpat aliquam velit
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    6. Faucibus porta lacus fringilla vel
    7. Aenean sit amet erat nunc
    8. Eget porttitor lorem

    Unstyled Lists

    • Lorem ipsum dolor sit amet
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
    • Facilisis in pretium nisl aliquet
    • Nulla volutpat aliquam velit
      • Phasellus iaculis neque
      • Purus sodales ultricies
      • Vestibulum laoreet porttitor sem
      • Ac tristique libero volutpat at
    • Faucibus porta lacus fringilla vel
    • Aenean sit amet erat nunc
    • Eget porttitor lorem
    Dark Mode
    Theming