tabler-ui/src/_includes/cards/form-dropdown-groups.html

Premium and Open Source dashboard template with responsive and high quality UI. For Free!

<div class="card">
	<div class="card-header">
		<h3 class="card-title">Dropdown Groups</h3>
	</div>
	<div class="card-body">
		<div class="form-group">
			<div class="input-group">
				<div class="input-group-btn">
					<button type="button" class="btn btn-secondary">Options</button>
					<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-bell mr-5"></i>News
						</a>
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
						</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
						</a>
					</div>
				</div>
				<input type="text" class="form-control" id="example-input1-group3" name="example-input1-group3" placeholder="Username">
			</div>
		</div>
		<div class="form-group ">
			<div class="input-group">
				<input type="email" class="form-control" id="example-input2-group3" name="example-input2-group3" placeholder="Email">
				<div class="input-group-btn">
					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
						<i class="fa fa-angle-down"></i>
					</button>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-bell mr-5"></i>News
						</a>
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="form-group ">
			<div class="input-group">
				<div class="input-group-btn dropup">
					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
						<i class="fa fa-angle-up"></i>
					</button>
					<div class="dropdown-menu">
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-bell mr-5"></i>News
						</a>
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
						</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
						</a>
					</div>
				</div>
				<input type="text" class="form-control" id="example-input3-group3" name="example-input3-group3" placeholder="..">
				<div class="input-group-btn dropup">
					<button type="button" class="btn btn-secondary" data-toggle="dropdown" >
						<i class="fa fa-angle-up"></i>
					</button>
					<div class="dropdown-menu dropdown-menu-right">
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-bell mr-5"></i>News
						</a>
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-envelope-o mr-5"></i>Messages
						</a>
						<div class="dropdown-divider"></div>
						<a class="dropdown-item" href="javascript:void(0)">
							<i class="fa fa-fw fa-pencil mr-5"></i>Edit Profile
						</a>
					</div>
				</div>
			</div>
		</div>
		<div class="form-footer">
			<button type="submit" class="btn btn-primary">Submit</button>
		</div>
	</div>
</div>