Elements

E

Create your new website with elements.

Main Colors

#377dff .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
#f8fafd .bg-light
.text-light
#ffffff .bg-white
.text-white

Typography

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.


Heading with letter

H1. Heading 1

H

H2. Heading 1

H

H3. Heading 1

H

H4. Heading 1

H
H5. Heading 1
H
H6. Heading 1
H

H1. Heading 1

H

H2. Heading 1

H

H3. Heading 1

H

H4. Heading 1

H
H5. Heading 1
H
H6. Heading 1
H

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

Alternative

Block

Alerts


Full Width

Use .rounded-0 class to .alert in full width mode to remove border radius.

Callout

Primary

Mauris eu massa libero. Curabitur malesuada molestie lorem sit amet vulputate. Nulla facilisi. Vivamus non lorem at sem hendrerit maximus a eu erat. Integer imperdiet dui et sapien accumsan, scelerisque suscipit erat finibus.

Info

Mauris eu massa libero. Curabitur malesuada molestie lorem sit amet vulputate. Nulla facilisi. Vivamus non lorem at sem hendrerit maximus a eu erat. Integer imperdiet dui et sapien accumsan, scelerisque suscipit erat finibus.

Danger

Mauris eu massa libero. Curabitur malesuada molestie lorem sit amet vulputate. Nulla facilisi. Vivamus non lorem at sem hendrerit maximus a eu erat. Integer imperdiet dui et sapien accumsan, scelerisque suscipit erat finibus.

Warning

Mauris eu massa libero. Curabitur malesuada molestie lorem sit amet vulputate. Nulla facilisi. Vivamus non lorem at sem hendrerit maximus a eu erat. Integer imperdiet dui et sapien accumsan, scelerisque suscipit erat finibus.

Bootstrap Modals

Tooltips Popovers

Tooltip


Popovers

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

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.

Slider


Nulla consequat nulla vitae enim venenatis, vel vulputate mi commodo. Pellentesque consequat at justo quis vulputate. Maecenas elementum metus eu maximus auctor. Morbi ultrices quam rhoncus purus bibendum ornare. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Jessica Nelson

Director Business Planning, Amazon

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.

Jessica Nelson

Director Business Planning, Amazon

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.

Jessica Nelson

Director Business Planning, Amazon

Avatars

Classic

Bordered

Modern

Other Components

Progress Bars

15
30
40

Badges

Primary Secondary Success Danger Warning Info Light Dark Black White

Tabs

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.


Pagination

Page 2 of 5

Pager


Images

© 2019 Malat - All Rights Reserved