Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

Button

Buttons

Default button style

 	
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

Buttons With Icon

Default button style

 	
	<button type="button" class="btn btn-primary"><i class="fa-solid fa-table-cells-large me-2"></i>Primary</button>
	<button type="button" class="btn btn-secondary"><i class="fa-solid fa-square me-2"></i>Secondary</button>
	<button type="button" class="btn btn-success"><i class="fa-solid fa-gear me-2"></i>Success</button>
	<button type="button" class="btn btn-danger"><i class="fa-solid fa-circle-exclamation me-2"></i>Danger</button>
	<button type="button" class="btn btn-warning"><i class="fa-solid fa-image me-2"></i>Warning</button>
	<button type="button" class="btn btn-info"><i class="fa-solid fa-phone-volume me-2"></i>Info</button>
	<button type="button" class="btn btn-light"><i class="fa-solid fa-lock me-2"></i>Light</button>
	<button type="button" class="btn btn-dark"><i class="fa-solid fa-circle-play me-2"></i>Dark</button>

Buttons Light

Button Light style

<button type="button" class="btn light btn-primary">Primary</button>
<button type="button" class="btn light btn-secondary">Secondary</button>
<button type="button" class="btn light btn-success">Success</button>
<button type="button" class="btn light btn-danger">Danger</button>
<button type="button" class="btn light btn-warning">Warning</button>
<button type="button" class="btn light btn-info">Info</button>
<button type="button" class="btn light btn-light">Light</button>
<button type="button" class="btn light btn-dark">Dark</button>

Outline Buttons

Default outline button style

 <button type="button" class="btn btn-outline-primary">Primary</button>
	<button type="button" class="btn btn-outline-secondary">Secondary</button>
	<button type="button" class="btn btn-outline-success">Success</button>
	<button type="button" class="btn btn-outline-danger">Danger</button>
	<button type="button" class="btn btn-outline-warning">Warning</button>
	<button type="button" class="btn btn-outline-info">Info</button>
	<button type="button" class="btn btn-outline-light">Light</button>
	<button type="button" class="btn btn-outline-dark">Dark</button>

Button Sizes

add .btn-lg .btn-sm .btn-xs to change the style

<button type="button" class="btn btn-primary btn-lg">Large Button</button>
	<button type="button" class="btn btn-primary">Default Button</button>
	<button type="button" class="btn btn-primary btn-sm">Small Button</button>
	<button type="button" class="btn btn-primary btn-xs">Extra Small Button</button>
	<button type="button" class="btn btn-primary btn-xxs">Extra Small Button</button>

Button Sizes Icon

add .btn-lg .btn-sm .btn-xs to change the style

<button type="button" class="btn btn-primary btn-icon-lg"><i class="fa-solid fa-house-chimney"></i></button>
	<button type="button" class="btn btn-primary btn-icon-md"><i class="fa-solid fa-house-chimney"></i></button>
	<button type="button" class="btn btn-primary btn-icon-sm"><i class="fa-solid fa-house-chimney"></i></button>
	<button type="button" class="btn btn-primary btn-icon-xs"><i class="fa-solid fa-house-chimney"></i></button>
	<button type="button" class="btn btn-primary btn-icon-xxs"><i class="fa-solid fa-house-chimney"></i></button>

Outline Button Sizes

add .btn-lg .btn-sm .btn-xs to change the style

<button type="button" class="btn btn-outline-primary btn-lg">Large button</button>
<button type="button" class="btn btn-outline-primary">Default button</button>
<button type="button" class="btn btn-outline-primary btn-md">Small button</button>
<button type="button" class="btn btn-outline-primary btn-sm">Small button</button>
<button type="button" class="btn btn-outline-primary btn-xs">Extra small button</button>

Rounded Buttons

add .btn-rounded to change the style

<button type="button" class="btn btn-rounded btn-primary">Primary</button>
<button type="button" class="btn btn-rounded btn-secondary">Secondary</button>
<button type="button" class="btn btn-rounded btn-success">Success</button>
<button type="button" class="btn btn-rounded btn-danger">Danger</button>
<button type="button" class="btn btn-rounded btn-warning">Warning</button>
<button type="button" class="btn btn-rounded btn-info">Info</button>
<button type="button" class="btn btn-rounded btn-light">Light</button>
<button type="button" class="btn btn-rounded btn-dark">Dark</button>

Rounded outline Buttons

add .btn-rounded to change the style

<div class="rounded-button">
	<button type="button" class="btn btn-rounded btn-outline-primary">Primary</button>
	<button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button>
	<button type="button" class="btn btn-rounded btn-outline-success">Success</button>
	<button type="button" class="btn btn-rounded btn-outline-danger">Danger</button>
	<button type="button" class="btn btn-rounded btn-outline-warning">Warning</button>
	<button type="button" class="btn btn-rounded btn-outline-info">Info</button>
	<button type="button" class="btn btn-rounded btn-outline-light">Light</button>
	<button type="button" class="btn btn-rounded btn-outline-dark">Dark</button>
</div>

Button Right icons

add .btn-icon-end to change the style

 <button type="button" class="btn btn-primary">Add to cart <span
class="btn-icon-end"><i class="fa fa-shopping-cart"></i></span>
</button>
<button type="button" class="btn btn-info">Add to wishlist <span
class="btn-icon-end"><i class="fa fa-heart"></i></span>
</button>
<button type="button" class="btn btn-danger">Remove <span class="btn-icon-end"><i class="fas fa-times"></i></span>
</button>
<button type="button" class="btn btn-secondary">Sent message <span
class="btn-icon-end"><i class="fa fa-envelope"></i></span>
</button>
<button type="button" class="btn btn-warning">Add bookmark <span
class="btn-icon-end"><i class="fa fa-star"></i></span>
</button>
<button type="button" class="btn btn-success">Success <span class="btn-icon-end"><i
	class="fa fa-check"></i></span>
</button>

Button Left icons

add .btn-icon-start to change the style

<button type="button" class="btn btn-rounded btn-primary"><span
	class="btn-icon-start text-primary"><i class="fa fa-shopping-cart"></i>
</span>Buy</button>
<button type="button" class="btn btn-rounded btn-info"><span
	class="btn-icon-start text-info"><i class="fa fa-plus color-info"></i>
</span>Add</button>
<button type="button" class="btn btn-rounded btn-danger"><span
	class="btn-icon-start text-danger"><i class="fa fa-envelope color-danger"></i>
</span>Email</button>
<button type="button" class="btn btn-rounded btn-secondary"><span
	class="btn-icon-start text-secondary"><i
		class="fa fa-share-alt color-secondary"></i> </span>Share</button>
<button type="button" class="btn btn-rounded btn-warning"><span
	class="btn-icon-start text-warning"><i class="fa fa-download color-warning"></i>
</span>Download</button>
<button type="button" class="btn btn-rounded btn-success"><span
	class="btn-icon-start text-success"><i class="fa fa-upload color-success"></i>
</span>Upload</button>

Square Buttons

add .btn-square to change the style

<button type="button" class="btn  btn-square btn-primary">Primary</button>
<button type="button" class="btn  btn-square btn-secondary">Secondary</button>
<button type="button" class="btn  btn-square btn-success">Success</button>
<button type="button" class="btn  btn-square btn-danger">Danger</button>
<button type="button" class="btn  btn-square btn-warning">Warning</button>
<button type="button" class="btn  btn-square btn-info">Info</button>
<button type="button" class="btn  btn-square btn-light">Light</button>
<button type="button" class="btn  btn-square btn-dark">Dark</button>

Square Outline Buttons

add .btn-square to change the style

 <button type="button" class="btn btn-square btn-outline-primary">Primary</button>
<button type="button" class="btn btn-square btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-square btn-outline-success">Success</button>
<button type="button" class="btn btn-square btn-outline-danger">Danger</button>
<button type="button" class="btn btn-square btn-outline-warning">Warning</button>
<button type="button" class="btn btn-square btn-outline-info">Info</button>
<button type="button" class="btn btn-square btn-outline-light">Light</button>
<button type="button" class="btn btn-square btn-outline-dark">Dark</button>

Rounded Button

add .btn-rounded to change the style

<button type="button" class="btn btn-rounded btn-primary">Primary</button>
<button type="button" class="btn btn-rounded btn-secondary">Secondary</button>
<button type="button" class="btn btn-rounded btn-success">Success</button>
<button type="button" class="btn btn-rounded btn-danger">Danger</button>
<button type="button" class="btn btn-rounded btn-warning">Warning</button>
<button type="button" class="btn btn-rounded btn-info">Info</button>
<button type="button" class="btn btn-rounded btn-light">Light</button>
<button type="button" class="btn btn-rounded btn-dark">Dark</button>

Rounded outline Buttons

add .btn-rounded to change the style

<button type="button" class="btn btn-rounded btn-outline-primary">Primary</button>
<button type="button" class="btn btn-rounded btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-rounded btn-outline-success">Success</button>
<button type="button" class="btn btn-rounded btn-outline-danger">Danger</button>
<button type="button" class="btn btn-rounded btn-outline-warning">Warning</button>
<button type="button" class="btn btn-rounded btn-outline-info">Info</button>
<button type="button" class="btn btn-rounded btn-outline-light">Light</button>
<button type="button" class="btn btn-rounded btn-outline-dark">Dark</button>

Buttons Transparent

Button transparent style

<button type="button" class="btn tp-btn btn-primary">Primary</button>
	<button type="button" class="btn tp-btn btn-secondary">Secondary</button>
	<button type="button" class="btn tp-btn btn-success">Success</button>
	<button type="button" class="btn tp-btn btn-danger">Danger</button>
	<button type="button" class="btn tp-btn btn-warning">Warning</button>
	<button type="button" class="btn tp-btn btn-info">Info</button>
	<button type="button" class="btn tp-btn btn-light">Light</button>
	<button type="button" class="btn tp-btn btn-dark">Dark</button>

Buttons Transparent Light

Button transparent light style

<button type="button" class="btn tp-btn-light btn-primary">Primary</button>
	<button type="button" class="btn tp-btn-light btn-secondary">Secondary</button>
	<button type="button" class="btn tp-btn-light btn-success">Success</button>
	<button type="button" class="btn tp-btn-light btn-danger">Danger</button>
	<button type="button" class="btn tp-btn-light btn-warning">Warning</button>
	<button type="button" class="btn tp-btn-light btn-info">Info</button>
	<button type="button" class="btn tp-btn-light btn-light">Light</button>
	<button type="button" class="btn tp-btn-light btn-dark">Dark</button>

Disabled Button

add disabled="disabled" to change the style

<button type="button" class="btn btn-rounded btn-primary" disabled="disabled">Primary</button>
<button type="button" class="btn btn-rounded btn-secondary" disabled="disabled">Secondary</button>
<button type="button" class="btn btn-rounded btn-success" disabled="disabled">Success</button>
<button type="button" class="btn btn-rounded btn-danger" disabled="disabled">Danger</button>
<button type="button" class="btn btn-rounded btn-warning" disabled="disabled">Warning</button>
<button type="button" class="btn btn-rounded btn-info" disabled="disabled">Info</button>

Socia icon Buttons with Name

add .btn-facebook, .btn-twitter, .btn-youtube... to change the style

 <button type="button" class="btn btn-facebook">Facebook <span class="btn-icon-end"><i class="fab fa-facebook-f"></i></span>
</button>
<button type="button" class="btn btn-twitter">Twitter <span class="btn-icon-end"><i class="fab fa-twitter"></i></span>
</button>
<button type="button" class="btn btn-youtube">Youtube <span class="btn-icon-end"><i class="fab fa-youtube"></i></span>
</button>
<button type="button" class="btn btn-instagram">Instagram <span
		class="btn-icon-end"><i class="fab fa-instagram"></i></span>
</button>
<button type="button" class="btn btn-pinterest">Pinterest <span
		class="btn-icon-end"><i class="fab fa-pinterest-square"></i></span>
</button>
<button type="button" class="btn btn-linkedin">Linkedin <span class="btn-icon-end"><i class="fab fa-linkedin-in"></i></span>
</button>
<button type="button" class="btn btn-google-plus">Google + <span
		class="btn-icon-end"><i class="fab fa-google-plus-g"></i></span>
</button>
<button type="button" class="btn btn-google">Google <span class="btn-icon-end"><i class="fab fa-google"></i></span>
</button>
<button type="button" class="btn btn-snapchat">Snapchat <span class="btn-icon-end"><i class="fab fa-snapchat"></i></span>
</button>
<button type="button" class="btn btn-whatsapp">Whatsapp <span class="btn-icon-end"><i class="fab fa-whatsapp"></i></span>
</button>
<button type="button" class="btn btn-tumblr">Tumblr <span class="btn-icon-end"><i class="fab fa-tumblr"></i></span>
</button>
<button type="button" class="btn btn-reddit">Reddit <span class="btn-icon-end"><i class="fab fa-reddit"></i></span>
</button>
<button type="button" class="btn btn-spotify">Spotify <span class="btn-icon-end"><i class="fab fa-spotify"></i></span>
</button>
<button type="button" class="btn btn-yahoo">Yahoo <span class="btn-icon-end"><i class="fab fa-yahoo"></i></span>
</button>
<button type="button" class="btn btn-dribbble">Dribbble <span class="btn-icon-end"><i class="fab fa-dribbble"></i></span>
</button>
<button type="button" class="btn btn-skype">Skype <span class="btn-icon-end"><i class="fab fa-skype"></i></span>
</button>
<button type="button" class="btn btn-quora">Quora <span class="btn-icon-end"><i class="fab fa-quora"></i></span>
</button>
<button type="button" class="btn btn-vimeo">Vimeo <span class="btn-icon-end"><i class="fab fa-vimeo-v"></i></span>
</button>