Dreamguy's Technologies

Alerts

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 link Another 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 link Another 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
Layout
Choose your layout
Vertical
Horizontal
Two Column
Color Scheme
Choose Light or Dark Scheme.
Orange
Light
Dark
Blue
Maroon
Purple
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light or Dark Topbar Color.
Light
Dark