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

Basic Dropdown

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list

<div class="basic-dropdown">
			<div class="dropdown">
				<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
					Dropdown button
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
				</div>
			</div>
		</div>

Dropdown Divider

The .dropdown-divider class is used to separate links inside the dropdown menu with a thin horizontal border

Disable and Active items

The .dropdown-header class is used to add headers inside the dropdown menu

<div class="basic-dropdown">
			<div class="dropdown">
				<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
					Dropdown button
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Normal</a>
					<a class="dropdown-item active" href="javascript:void(0);">Active</a>
					<a class="dropdown-item disabled" href="javascript:void(0);">Disabled</a>
				</div>
			</div>
		</div>

Align Right

To right-align the dropdown, add the .dropdown-menu-end class to the element with .dropdown-menu

 <div class="basic-dropdown">
			<div class="dropdown">
				<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
					Dropdown button
				</button>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
				</div>
			</div>
		</div>

Dropup

The .dropup class makes the dropdown menu expand upwards instead of downwards

<div class="basic-dropdown">
			<!-- Default dropup button -->
			<div class="btn-group dropup mb-1">
				<button type="button" class="btn btn-default dropdown-toggle" data-bs-toggle="dropdown">
					Dropup
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
				</div>
			</div>javascript:void(0);
			<!-- Split dropup button -->
			<div class="btn-group dropup mb-1">
				<button type="button" class="btn btn-primary light">
					Split dropup
				</button>
				<button type="button" class="btn btn-primary light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
					<span class="sr-only">Toggle Dropdown</span>
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
				</div>
			</div>
		</div>

Dropright

Trigger dropdown menus at the right of the elements by adding .dropend to the parent element

 <div class="basic-dropdown">
			<!-- Default dropright button -->
			<div class="btn-group dropend mb-1">
				<button type="button" class="btn btn-primary light dropdown-toggle" data-bs-toggle="dropdown">
					Dropright
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
				</div>
			</div>

			<!-- Split dropright button -->
			<div class="btn-group dropend mb-1">
				<button type="button" class="btn btn-primary light">
					Split dropright
				</button>
				<button type="button" class="btn btn-primary light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
					<span class="sr-only">Toggle Dropright</span>
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
				</div>
			</div>
		</div>

dropstart

Trigger dropdown menus at the right of the elements by adding .dropstart to the parent element

 <div class="basic-dropdown">
			<!-- Default dropstart button -->
			<div class="btn-group dropstart mb-1">
				<button type="button" class="btn btn-primary light dropdown-toggle" data-bs-toggle="dropdown">
					dropstart
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
					<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
				</div>
			</div>

			<!-- Split dropstart button -->
			<div class="btn-group mb-1">
				<div class="btn-group dropstart " role="group">
					<button type="button" class="btn btn-primary light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
						<span class="sr-only">Toggle dropstart</span>
					</button>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="javascript:void(0);">Link 1</a>
						<a class="dropdown-item" href="javascript:void(0);">Link 2</a>
						<a class="dropdown-item" href="javascript:void(0);">Link 3</a>
					</div>
				</div>
				<button type="button" class="btn btn-primary light">
					Split dropstart
				</button>
			</div>
		</div>

Button Dropdowns

 <div class="button-dropdown">
		<div class="btn-group mb-1">
			<button type="button" class="btn btn-primary light">Primary</button>
			<button type="button" class="btn btn-primary light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="javascript:void(0);">Action</a>
				<a class="dropdown-item" href="javascript:void(0);">Another action</a>
				<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
			</div>
		</div>javascript:void(0);
		<div class="btn-group mb-1">
			<button type="button" class="btn btn-secondary">Secondary</button>
			<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="javascript:void(0);">Action</a>
				<a class="dropdown-item" href="javascript:void(0);">Another action</a>
				<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
			</div>
		</div>

		<div class="btn-group mb-1">
			<button type="button" class="btn btn-success">Success</button>
			<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="javascript:void(0);">Action</a>
				<a class="dropdown-item" href="javascript:void(0);">Another action</a>
				<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
			</div>
		</div>

		<div class="btn-group mb-1">
			<button type="button" class="btn btn-info">Info</button>
			<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="javascript:void(0);">Action</a>
				<a class="dropdown-item" href="javascript:void(0);">Another action</a>
				<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
			</div>
		</div>

		<div class="btn-group mb-1">
			<button type="button" class="btn btn-warning">Warning</button>
			<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="javascript:void(0);">Action</a>
				<a class="dropdown-item" href="javascript:void(0);">Another action</a>
				<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
			</div>
		</div>

		<div class="btn-group mb-1">
			<button type="button" class="btn btn-danger">Danger</button>
			<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
			</button>
			<div class="dropdown-menu">
				<a class="dropdown-item" href="javascript:void(0);">Action</a>
				<a class="dropdown-item" href="javascript:void(0);">Another action</a>
				<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
				<div class="dropdown-divider"></div>
				<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
			</div>
		</div>
		</div>

Sizing

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

 <div class="dropdown-size">
			<!-- Large button groups (default and split) -->
			<div class="btn-group mb-1">
				<button class="btn btn-primary light btn-lg dropdown-toggle" type="button" data-bs-toggle="dropdown">
					Large button
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Action</a>
					<a class="dropdown-item" href="javascript:void(0);">Another action</a>
					<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
				</div>
			</div>
			<div class="btn-group mb-1">
				<button class="btn btn-primary light btn-lg" type="button">
					Large split button
				</button>
				<button type="button" class="btn btn-lg btn-primary light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<span class="sr-only">Toggle Dropdown</span>
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Action</a>
					<a class="dropdown-item" href="javascript:void(0);">Another action</a>
					<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
				</div>
			</div>

			<!-- Small button groups (default and split) -->
			<div class="btn-group mb-1">
				<button class="btn btn-primary light btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown">
					Small button
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Action</a>
					<a class="dropdown-item" href="javascript:void(0);">Another action</a>
					<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
				</div>
			</div>
			<div class="btn-group mb-1">
				<button class="btn btn-primary light btn-sm" type="button">
					Small split button
				</button>
				<button type="button" class="btn btn-sm btn-primary light dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
					<span class="sr-only">Toggle Dropdown</span>
				</button>
				<div class="dropdown-menu">
					<a class="dropdown-item" href="javascript:void(0);">Action</a>
					<a class="dropdown-item" href="javascript:void(0);">Another action</a>
					<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
					<div class="dropdown-divider"></div>
					<a class="dropdown-item" href="javascript:void(0);">Separated link</a>
				</div>
			</div>
		</div>

Custom style

Use .custom-dropdown this class for this style

 <div class="row">
		<div class="col-xl-3">
			<div class="dropdown custom-dropdown">
				<div data-bs-toggle="dropdown">Last 7 days
					<i class="fa fa-angle-down ms-3"></i>
				</div>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item" href="javascript:void(0);">Last 1 Month</a>
					<a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a>
					<a class="dropdown-item" href="javascript:void(0);">Last 10 Month</a>
				</div>
			</div>
		</div>

		<div class="col-xl-3">
			<div class="dropdown custom-dropdown">
				<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="dropdown">Last 7 days
					<i class="fa fa-angle-down ms-3"></i>
				</button>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item" href="javascript:void(0);">Last 1 Month</a>
					<a class="dropdown-item" href="javascript:void(0);">Last 6 Month</a>
					<a class="dropdown-item" href="javascript:void(0);">Last 10 Month</a>
				</div>
			</div>
		</div>

		<div class="col-xl-3">
			<div class="dropdown custom-dropdown">
				<button type="button" class="btn btn-sm btn-outline-primary" data-bs-toggle="dropdown">Last 1 Hour
					<i class="fa fa-angle-down ms-3"></i>
				</button>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item" href="javascript:void(0);">Last 1 hour</a>
					<a class="dropdown-item" href="javascript:void(0);">Last 2 hour</a>
					<a class="dropdown-item" href="javascript:void(0);">Last 3 hour</a>
				</div>
			</div>
		</div>

		<div class="col-xl-3">
			<div class="dropdown custom-dropdown">
				<button type="button" class="btn btn-sm btn-primary light" data-bs-toggle="dropdown">Last 7 days
					<i class="fa fa-angle-down ms-3"></i>
				</button>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item"  href="javascript:void(0);">Last 1 Month</a>
					<a class="dropdown-item"  href="javascript:void(0);">Last 6 Month</a>
					<a class="dropdown-item"  href="javascript:void(0);">Last 10 Month</a>
				</div>
			</div>
		</div>

		<div class="col-xl-3">
			<div class="dropdown custom-dropdown">
				<button type="button" class="btn btn-sm btn-primary light" data-bs-toggle="dropdown">
					<i class="ti-search mr-3"></i> 3 AM
					<i class="fa fa-angle-down ms-3"></i>
				</button>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item"  href="javascript:void(0);">6 AM</a>
					<a class="dropdown-item"  href="javascript:void(0);">9 AM</a>
					<a class="dropdown-item"  href="javascript:void(0);">12 AM</a>
				</div>
			</div>
		</div>

		<div class="col-xl-3">
			<div class="dropdown custom-dropdown">
				<button type="button" class="btn btn-sm btn-primary light" data-bs-toggle="dropdown">
					<i class="ti-calendar m-r-5"></i> March 20, 2018   To  April
					20, 2018
					<i class="fa fa-angle-down ms-3"></i>
				</button>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item"  href="javascript:void(0);">May 20, 2018   To   June 20,
						2018</a>
					<a class="dropdown-item"  href="javascript:void(0);">July 20, 2018   To   August
						20, 2018</a>
				</div>
			</div>
		</div>
		<div class="col-xl-3">
			<div class="dropdown custom-dropdown">
				<div class="btn sharp btn-primary light tp-btn" data-bs-toggle="dropdown">
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="12" cy="5" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="12" cy="19" r="2"/></g></svg>
				</div>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item"  href="javascript:void(0);">Option 1</a>
					<a class="dropdown-item"  href="javascript:void(0);">Option 2</a>
					<a class="dropdown-item"  href="javascript:void(0);">Option 3</a>
				</div>
			</div>
		</div>

		<div class="col-xl-3">
			<div class="dropdown custom-dropdown">
				<div class="btn sharp btn-primary light tp-btn" data-bs-toggle="dropdown">
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="0" width="24" height="24"/><circle fill="#000000" cx="12" cy="5" r="2"/><circle fill="#000000" cx="12" cy="12" r="2"/><circle fill="#000000" cx="12" cy="19" r="2"/></g></svg>
				</div>
				<div class="dropdown-menu dropdown-menu-end">
					<a class="dropdown-item"  href="javascript:void(0);">Option 1</a>
					<a class="dropdown-item"  href="javascript:void(0);">Option 2</a>
					<a class="dropdown-item"  href="javascript:void(0);">Option 3</a>
				</div>
			</div>
		</div>
		</div>