Elements

Create your new website with elements.

Main Colors

#0951d6 .bg-primary
.text-primary
#6e1ac9 .bg-secondary
.text-secondary
#00c9a7 .bg-success
.text-success
#de4437 .bg-danger
.text-danger
#ffc107 .bg-warning
.text-warning
#00dffc .bg-info
.text-info
#1e2022 .bg-dark
.text-dark
#000000 .bg-black
.text-black
#f8f8f9 .bg-light
.text-light
#ffffff .bg-white
.text-white

Typography

Display headings

Display 1
Display 2
Display 3
Display 4

Classic headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Uppercase headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6

Standard paragraph

Nullam scelerisque enim in sem molestie, non finibus eros tristique. Etiam lobortis imperdiet vehicula. In ut neque arcu. Praesent mollis mauris quis mauris mollis egestas. Suspendisse sit amet nulla vel sem varius semper et nec nisl. Sed quis sollicitudin dolor. Etiam lorem orci, suscipit gravida risus id, eleifend egestas magna. Donec aliquet nisl purus, ut ullamcorper metus porttitor ut. Praesent a ullamcorper dolor. Curabitur sollicitudin magna eget porta egestas. Sed pharetra ornare orci euismod malesuada. Quisque at finibus lectus, ac pretium ex.

Lead paragraph

Fusce pretium, elit ut tincidunt fermentum, neque nisi tristique arcu, id viverra lacus tortor sed orci. Integer eu pharetra lacus. Donec venenatis orci id dui vestibulum, vel hendrerit arcu scelerisque.


Blockquotes

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

User feedback

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

User feedback

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

User feedback

Disc List

  • What is Malat ?
  • What are Sections ?
  • How can I leave comments on posts ?
  • How to create a new page ?
  • How to Integrate with MailChimp
  • How to change thank you message depending on the language used ?

Decimal List

  • What is Malat ?
  • What are Sections ?
  • How can I leave comments on posts ?
  • How to create a new page ?
  • How to Integrate with MailChimp
  • How to change thank you message depending on the language used ?

Lower Alpha List

  • What is Malat ?
  • What are Sections ?
  • How can I leave comments on posts ?
  • How to create a new page ?
  • How to Integrate with MailChimp
  • How to change thank you message depending on the language used ?

Upper Alpha List

  • What is Malat ?
  • What are Sections ?
  • How can I leave comments on posts ?
  • How to create a new page ?
  • How to Integrate with MailChimp
  • How to change thank you message depending on the language used ?

Unstyled

  • What is Malat ?
  • What are Sections ?
  • How can I leave comments on posts ?
  • How to create a new page ?
  • How to Integrate with MailChimp
  • How to change thank you message depending on the language used ?

Description list alignment

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Buttons

Border Radius

Types with Icons

Sizes

Colors

Shadow

Outline

Block

Bootstrap Modals

Tooltips Popovers

Tooltip


Popovers

Accordions

Integer ut euismod massa. Sed feugiat vitae turpis a porta. Aliquam sagittis interdum malesuada. Vivamus ornare pharetra diam sit amet tincidunt. Nunc sit amet pharetra odio. Vivamus in tempor ipsum, sit amet elementum neque. Sed faucibus posuere pharetra. In imperdiet eleifend dui a aliquet. Aliquam imperdiet tristique purus vitae rutrum. Donec eu commodo nunc. Mauris dignissim lectus massa, eget cursus quam mollis id. Morbi sit amet ex non nibh maximus cursus at vitae mi. Duis tincidunt aliquam mi sed sagittis.
Nunc nec dapibus ex. Aenean placerat, ex id convallis dictum, ex nulla rutrum justo, non lobortis nisi ex at leo. Sed tristique aliquet sem vel pharetra. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis a sapien quis quam auctor feugiat. Donec volutpat condimentum risus, eu iaculis nibh dapibus eu.
Quamii fringilla, nunc eu sagittis sagittis, urna ligula luctus odio, vitae hendrerit massa dui ac est. Donec leo tortor, tristique et aliquet at, convallis id mi. Vivamus turpis diam, ultrices et tempus quis, sollicitudin et risus. Pellentesque nec sapien id dolor condimentum condimentum ut sed neque. Integer efficitur accumsan risus, vitae posuere massa aliquam at.

Tabs

Nav Pills - Horizontal - Default Tabs Color

Nam semper vel nunc nec eleifend. In pretium id tortor elementum commodo. Vestibulum ipsum nisi, pulvinar et auctor in, suscipit sed nulla. Sed fringilla eu nulla a fringilla. Ut eleifend enim augue, quis posuere mi molestie at. Donec nec felis mauris. Suspendisse placerat sem nec ligula finibus porta. Aenean vitae feugiat lacus. Suspendisse interdum a eros vitae commodo. Curabitur a lacinia libero.

Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Curabitur a lacinia libero. Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Nav Pills - Horizontal - Dark Tabs Color

Nam semper vel nunc nec eleifend. In pretium id tortor elementum commodo. Vestibulum ipsum nisi, pulvinar et auctor in, suscipit sed nulla. Sed fringilla eu nulla a fringilla. Ut eleifend enim augue, quis posuere mi molestie at. Donec nec felis mauris. Suspendisse placerat sem nec ligula finibus porta. Aenean vitae feugiat lacus. Suspendisse interdum a eros vitae commodo. Curabitur a lacinia libero.

Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Curabitur a lacinia libero. Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Nav Pills - Horizontal Filled

Nam semper vel nunc nec eleifend. In pretium id tortor elementum commodo. Vestibulum ipsum nisi, pulvinar et auctor in, suscipit sed nulla. Sed fringilla eu nulla a fringilla. Ut eleifend enim augue, quis posuere mi molestie at. Donec nec felis mauris. Suspendisse placerat sem nec ligula finibus porta. Aenean vitae feugiat lacus. Suspendisse interdum a eros vitae commodo. Curabitur a lacinia libero.

Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Curabitur a lacinia libero. Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Modern - Nav Pills - Horizontal - Default Tabs Color

Nam semper vel nunc nec eleifend. In pretium id tortor elementum commodo. Vestibulum ipsum nisi, pulvinar et auctor in, suscipit sed nulla. Sed fringilla eu nulla a fringilla. Ut eleifend enim augue, quis posuere mi molestie at. Donec nec felis mauris. Suspendisse placerat sem nec ligula finibus porta. Aenean vitae feugiat lacus. Suspendisse interdum a eros vitae commodo. Curabitur a lacinia libero.

Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Curabitur a lacinia libero. Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Modern - Nav Pills - Horizontal - Dark Tabs Color

Nam semper vel nunc nec eleifend. In pretium id tortor elementum commodo. Vestibulum ipsum nisi, pulvinar et auctor in, suscipit sed nulla. Sed fringilla eu nulla a fringilla. Ut eleifend enim augue, quis posuere mi molestie at. Donec nec felis mauris. Suspendisse placerat sem nec ligula finibus porta. Aenean vitae feugiat lacus. Suspendisse interdum a eros vitae commodo. Curabitur a lacinia libero.

Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Curabitur a lacinia libero. Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Modern - Nav Pills - Horizontal Filled

Nam semper vel nunc nec eleifend. In pretium id tortor elementum commodo. Vestibulum ipsum nisi, pulvinar et auctor in, suscipit sed nulla. Sed fringilla eu nulla a fringilla. Ut eleifend enim augue, quis posuere mi molestie at. Donec nec felis mauris. Suspendisse placerat sem nec ligula finibus porta. Aenean vitae feugiat lacus. Suspendisse interdum a eros vitae commodo. Curabitur a lacinia libero.

Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Curabitur a lacinia libero. Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Nav Pills - Horizontal - Light Tabs Color

Nam semper vel nunc nec eleifend. In pretium id tortor elementum commodo. Vestibulum ipsum nisi, pulvinar et auctor in, suscipit sed nulla. Sed fringilla eu nulla a fringilla. Ut eleifend enim augue, quis posuere mi molestie at. Donec nec felis mauris. Suspendisse placerat sem nec ligula finibus porta. Aenean vitae feugiat lacus. Suspendisse interdum a eros vitae commodo. Curabitur a lacinia libero.

Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Curabitur a lacinia libero. Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Modern - Nav Pills - Horizontal - Light Tabs Color

Nam semper vel nunc nec eleifend. In pretium id tortor elementum commodo. Vestibulum ipsum nisi, pulvinar et auctor in, suscipit sed nulla. Sed fringilla eu nulla a fringilla. Ut eleifend enim augue, quis posuere mi molestie at. Donec nec felis mauris. Suspendisse placerat sem nec ligula finibus porta. Aenean vitae feugiat lacus. Suspendisse interdum a eros vitae commodo. Curabitur a lacinia libero.

Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Curabitur a lacinia libero. Nullam faucibus suscipit ex, ut efficitur elit iaculis et. Aliquam ligula diam, dictum nec porttitor a, suscipit quis erat. Curabitur id aliquam tellus. Mauris vel luctus nibh. Donec magna velit, pharetra vel interdum at, laoreet vitae diam. Mauris eu tempor nisl. Nullam sollicitudin augue ut erat tristique, in pulvinar lectus gravida. Donec massa orci, blandit ac ornare vitae, mollis ac sapien.

Blocks

Bordered

Block

In non luctus lacus. Morbi id orci diam. Donec nec ullamcorper nulla, tincidunt gravida magna. Nullam in est vel justo mattis tristique.

Block

In non luctus lacus. Morbi id orci diam. Donec nec ullamcorper nulla, tincidunt gravida magna. Nullam in est vel justo mattis tristique.

With Image Overlay

Block with Image Overlay

In non luctus lacus. Morbi id orci diam. Donec nec ullamcorper nulla, tincidunt gravida magna. Nullam in est vel justo mattis tristique.

Block with Image Overlay

In non luctus lacus. Morbi id orci diam. Donec nec ullamcorper nulla, tincidunt gravida magna. Nullam in est vel justo mattis tristique.

Feature Blocks

Default

Launch Quickly

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Stylish Design

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Bordered

Launch Quickly

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Stylish Design

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

With Background

Launch Quickly

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Stylish Design

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

With Image Overlay

Launch Quickly

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Stylish Design

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Horizontal

Launch Quickly

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Stylish Design

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Well Documented

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Fully Customizable

Quisque ultrices non velit sit amet consectetur. Cras turpis dolor, facilisis a nibh non, ullamcorper facilisis mauris. Nulla rutrum arcu sed ligula malesuada, quis condimentum eros sollicitudin.

Tables

Basic table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Striped rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Bordered table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Hover rows

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small table

# First Last Handle
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

List Group

Basic

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Horizontal

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Vestibulum at eros

Other Components

Progress Bars

15
30
40

Badges

Primary Secondary Success Danger Warning Info Light Dark Black White

Images


Shadows

Small
Default
Large