719 lines
42 KiB
PHP
719 lines
42 KiB
PHP
@extends('layout.master')
|
||
|
||
@section('content')
|
||
<div class="row">
|
||
<div class="col-lg-12 grid-margin">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Gradient Dropdown</h4>
|
||
<p class="card-description"> Add class <code>.btn-{color}</code> to the button inside <code>.dropdown</code>
|
||
</p>
|
||
<div class="template-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuOutlineButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton1">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuOutlineButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton2">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuOutlineButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton3">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuOutlineButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton4">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuOutlineButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton5">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuOutlineButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton6">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Basic dropdown</h4>
|
||
<p class="card-description"> Wrap the dropdown’s toggle (your button or link) and the dropdown menu within <code>.dropdown</code>
|
||
</p>
|
||
<div class="template-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton5">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton6">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Dropdown outline</h4>
|
||
<p class="card-description"> Add class <code>.btn-outline-{color}</code> to the button inside <code>.dropdown</code>
|
||
</p>
|
||
<div class="template-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-outline-primary dropdown-toggle" type="button" id="dropdownMenuOutlineButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton1">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuOutlineButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton2">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-outline-danger dropdown-toggle" type="button" id="dropdownMenuOutlineButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton3">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-outline-warning dropdown-toggle" type="button" id="dropdownMenuOutlineButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton4">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-outline-success dropdown-toggle" type="button" id="dropdownMenuOutlineButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton5">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-outline-info dropdown-toggle" type="button" id="dropdownMenuOutlineButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuOutlineButton6">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-lg-12 grid-margin">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Dropdown menu</h4>
|
||
<div class="row">
|
||
<div class="col-md-3 dropdown-menu-static-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuOutlineButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown </button>
|
||
<div class="dropdown-menu show" aria-labelledby="dropdownMenuOutlineButton1">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 dropdown-menu-static-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuOutlineButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown </button>
|
||
<div class="dropdown-menu show" aria-labelledby="dropdownMenuOutlineButton2">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 dropdown-menu-static-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuOutlineButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown </button>
|
||
<div class="dropdown-menu show" aria-labelledby="dropdownMenuOutlineButton3">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 dropdown-menu-static-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuOutlineButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown </button>
|
||
<div class="dropdown-menu show" aria-labelledby="dropdownMenuOutlineButton4">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 dropdown-menu-static-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuOutlineButton8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown </button>
|
||
<div class="dropdown-menu show" aria-labelledby="dropdownMenuOutlineButton8">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 dropdown-menu-static-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuOutlineButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown </button>
|
||
<div class="dropdown-menu show" aria-labelledby="dropdownMenuOutlineButton5">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 dropdown-menu-static-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuOutlineButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown </button>
|
||
<div class="dropdown-menu show" aria-labelledby="dropdownMenuOutlineButton6">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 dropdown-menu-static-demo">
|
||
<div class="dropdown">
|
||
<button class="btn btn-dark dropdown-toggle" type="button" id="dropdownMenuOutlineButton7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> Dropdown </button>
|
||
<div class="dropdown-menu show" aria-labelledby="dropdownMenuOutlineButton7">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 grid-margin stretch-card">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Split button dropdowns</h4>
|
||
<p class="card-description"> Wrap two buttons in <code>.btn-group</code> and add <code>.dropdown-toggle-split</code> to the toggling button </p>
|
||
<div class="template-demo">
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-primary">Dropdown</button>
|
||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton1">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-danger">Dropdown</button>
|
||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton2">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-success">Dropdown</button>
|
||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton3">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-secondary">Dropdown</button>
|
||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton4">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-info">Dropdown</button>
|
||
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton5">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group">
|
||
<button type="button" class="btn btn-warning">Dropdown</button>
|
||
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" id="dropdownMenuSplitButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSplitButton6">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6 grid-margin stretch-card">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Icon dropdowns</h4>
|
||
<p class="card-description"> Add icon tags instead of text </p>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="template-demo d-flex justify-content-between">
|
||
<div class="dropdown">
|
||
<button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenuIconButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-earth"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton1">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuIconButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-trophy-outline"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton2">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-outline-info dropdown-toggle" id="dropdownMenuIconButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-clock"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton3">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="template-demo d-flex justify-content-between">
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-success dropdown-toggle" id="dropdownMenuIconButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-heart"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton4">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-warning dropdown-toggle" id="dropdownMenuIconButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-logout"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton5">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuIconButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-security"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton6">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<div class="template-demo d-flex justify-content-between">
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-dark dropdown-toggle" id="dropdownMenuIconButton7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-account"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton7">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-info dropdown-toggle" id="dropdownMenuIconButton8" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-bell"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton8">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button type="button" class="btn btn-success dropdown-toggle" id="dropdownMenuIconButton7" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<i class="mdi mdi-account"></i>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuIconButton9">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 grid-margin stretch-card">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Dropup variation</h4>
|
||
<p class="card-description"> Add class <code>.dropup</code>
|
||
</p>
|
||
<div class="template-demo">
|
||
<div class="btn-group dropup">
|
||
<button type="button" class="btn btn-primary">Dropdown</button>
|
||
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton1">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group dropup">
|
||
<button type="button" class="btn btn-danger">Dropdown</button>
|
||
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton2">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group dropup">
|
||
<button type="button" class="btn btn-success">Dropdown</button>
|
||
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton3">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group dropup">
|
||
<button type="button" class="btn btn-secondary">Dropdown</button>
|
||
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton4">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group dropup">
|
||
<button type="button" class="btn btn-info">Dropdown</button>
|
||
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton5" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton5">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="btn-group dropup">
|
||
<button type="button" class="btn btn-warning">Dropdown</button>
|
||
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" id="dropupMenuSplitButton6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropupMenuSplitButton6">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6 grid-margin stretch-card">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Dropdown sizes</h4>
|
||
<p class="card-description"> Add class <code>.btn-{size}</code> to dropdown buttons </p>
|
||
<div class="template-demo mt-5">
|
||
<div class="dropdown">
|
||
<button class="btn btn-danger btn-lg dropdown-toggle" type="button" id="dropdownMenuSizeButton1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton1">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-danger dropdown-toggle" type="button" id="dropdownMenuSizeButton2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton2">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="dropdown">
|
||
<button class="btn btn-danger btn-sm dropdown-toggle" type="button" id="dropdownMenuSizeButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuSizeButton3">
|
||
<h6 class="dropdown-header">Settings</h6>
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
@endsection |