bootstrap-webcomponents
Version:
1,134 lines (1,056 loc) • 197 kB
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bootstrap Web Components Demo | https://www.htmlelements.com/</title>
<meta name="description"
content="Use web components for Bootstrap and Custom Elements with Bootstrap styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.">
<meta name="author" content="https://www.htmlelements.com/ and Boyko Markov">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script type="text/javascript" src="../node_modules/@smarthtmlelements/smart-core/source/smart.core.js"></script>
<script src="index.js"></script>
<script type="text/javascript" src="../src/smart.bootstrap.js"></script>
</head>
<body>
<h1>Bootstrap Web Components by <a href="https://www.htmlelements.com/" target="_blank">Smart</a> </h1>
<div class="main-container">
<section class="nav-section">
<!-- Contents Menu Section -->
<nav>
<ul>
<h4>Content</h4>
<li><a href="#quickStart">Getting Started</a></li>
</ul>
</nav>
<nav>
<ul>
<h4>Components</h4>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#dropDowns">Dropdowns</a></li>
<li><a href="#inputGroups">Input group</a></li>
<li><a href="#modal">Modal</a></li>
<li><a href="#forms">Forms</a></li>
<li><a href="#tabs">Tabs</a></li>
</ul>
</nav>
</section>
<section class="content-section bd-content">
<p>Use Custom Elements with Bootstrap for actions in forms, dialogs, and more with support for multiple
sizes,
states, and more.</p>
<h2 class="separator" id="quickStart">Quick Start</h2>
<p>
Looking to quickly add Bootstrap Webcomponents to your project ?
<p>
Official Github page <a href="https://github.com/HTMLElements/Bootstrap-Web-Components">Bootstrap
Web Components</a>
</p>
<p>
Using a package manager download the Bootstrap Webcomponents <a
href="https://www.npmjs.com/package/bootstrap-webcomponents">NPM package</a>
</p>
</p>
<h2>CSS</h2>
<p>
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our
CSS.
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre
class="prettyprint"><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"></pre>
</figure>
</p>
<h2>JS</h2>
<p>
Copy-paste the <script> tags into your <head> before all other javascript references to load
the neccessary dependencies.
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<script type="text/javascript" src="../node_modules/@smarthtmlelements/smart-core/source/smart.core.js"></script>
<script type="text/javascript" src="../src/bootstrap-elements.js""></script></pre>
</figure>
</p>
<h2>Starter Template</h2>
<p>Here's an example on how to create a simple button on a page:</p>
<p>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script type="text/javascript" src="../node_modules/@smarthtmlelements/smart-core/source/smart.core.js"></script>
<script type="text/javascript" src="../src/bootstrap-elements.js"></script>
</head>
<body>
<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
</body>
</pre>
</figure>
</p>
<h2 class="separator">Components</h3>
<h2 id="buttons">Bootstrap Buttons</h2><br />
<p>Use Bootstrap custom button styles for actions in forms, dialogs, and more with support for multiple
sizes, states, and more.</p>
</br>
<h3>Examples</h3>
<p>Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a
few extras thrown in for more control.</p>
<div class="bd-example">
<bootstrap-button style-mode="primary">Primary</bootstrap-button>
<bootstrap-button style-mode="secondary">Secondary</bootstrap-button>
<bootstrap-button style-mode="success">Success</bootstrap-button>
<bootstrap-button style-mode="danger">Danger</bootstrap-button>
<bootstrap-button style-mode="warning">Warning</bootstrap-button>
<bootstrap-button style-mode="info">Info</bootstrap-button>
<bootstrap-button style-mode="light">Light</bootstrap-button>
<bootstrap-button style-mode="dark">Dark</bootstrap-button>
<bootstrap-button style-mode="link">Link</bootstrap-button>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-button style-mode="primary">Primary</bootstrap-button>
<bootstrap-button style-mode="secondary">Secondary</bootstrap-button>
<bootstrap-button style-mode="success">Success</bootstrap-button>
<bootstrap-button style-mode="danger">Danger</bootstrap-button>
<bootstrap-button style-mode="warning">Warning</bootstrap-button>
<bootstrap-button style-mode="info">Info</bootstrap-button>
<bootstrap-button style-mode="light">Light</bootstrap-button>
<bootstrap-button style-mode="dark">Dark</bootstrap-button>
<bootstrap-button style-mode="link">Link</bootstrap-button></pre>
</figure>
<p>
<b>StyleMode</b> property allows the user to change the style of the elements.
</p>
<h2>Outlined Buttons</h2><br />
<p>
In need of a button, but not the hefty background colors they bring? Just add the class
<b>outlined</b> to remove all background images and colors on any button.
</p>
<div class="bd-example">
<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
<bootstrap-button outlined style-mode="secondary">Secondary</bootstrap-button>
<bootstrap-button outlined style-mode="success">Success</bootstrap-button>
<bootstrap-button outlined style-mode="danger">Danger</bootstrap-button>
<bootstrap-button outlined style-mode="warning">Warning</bootstrap-button>
<bootstrap-button outlined style-mode="info">Info</bootstrap-button>
<bootstrap-button outlined style-mode="light">Light</bootstrap-button>
<bootstrap-button outlined style-mode="dark">Dark</bootstrap-button>
<bootstrap-button outlined style-mode="link">Link</bootstrap-button>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-button outlined style-mode="primary">Primary</bootstrap-button>
<bootstrap-button outlined style-mode="secondary">Secondary</bootstrap-button>
<bootstrap-button outlined style-mode="success">Success</bootstrap-button>
<bootstrap-button outlined style-mode="danger">Danger</bootstrap-button>
<bootstrap-button outlined style-mode="warning">Warning</bootstrap-button>
<bootstrap-button outlined style-mode="info">Info</bootstrap-button>
<bootstrap-button outlined style-mode="light">Light</bootstrap-button>
<bootstrap-button outlined style-mode="dark">Dark</bootstrap-button>
<bootstrap-button outlined style-mode="link">Link</bootstrap-button></pre>
</figure>
<p>
Setting the <b>outlined</b> property the elements turn into outlined buttons with no filling untill
hovered.
</p>
<h2>Buttons Sizes</h2><br />
<p>
Fancy larger or smaller buttons? Just set the <b>sizeMode</b> property to 'sm' or 'lg' for
additional sizes.
</p>
<div class="bd-example">
<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-button size-mode="lg">Large Button</bootstrap-button>
<bootstrap-button size-mode="lg">Large Button</bootstrap-button></pre>
</figure>
<div class="bd-example">
<bootstrap-button size-mode="sm">Small Button</bootstrap-button>
<bootstrap-button size-mode="sm">Small Button</bootstrap-button>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-button size-mode="sm">Large Button</bootstrap-button>
<bootstrap-button size-mode="sm">Large Button</bootstrap-button></pre>
</figure>
<p>
Buttons can be reset back to normal if <b>SizeMode</b> is set to an empty string.
</p>
<h2>Disabled Buttons</h2><br />
<div class="bd-example">
<bootstrap-button disabled style-mode="primary">Primary</bootstrap-button>
<bootstrap-button disabled style-mode="secondary">Secondary</bootstrap-button>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-button disabled>Primary Button</bootstrap-button>
<bootstrap-button disabled>Button</bootstrap-button></pre>
</figure>
<p>
To disable/enable an element just set the <b>disabled</b> property.
</p>
<h2>Bootstrap Checkbox</h2><br />
<p>
Checkboxes are buttons that can be toggled. The checked state of these buttons can be updated via
click or by setting the <b>checked</b> property to true.
Checkboxes like the other toggle buttons can be pre-checked.
</p>
<div class="bd-example">
<bootstrap-check-box checked>Checked</bootstrap-check-box>
<bootstrap-check-box>Unchecked</bootstrap-check-box>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-check-box checked>Checked</bootstrap-check-box>
<bootstrap-check-box>Unchecked</bootstrap-check-box></pre>
</figure>
<p>
Appling/Removing the <b>checked</b> attribute will toggle the state of the button.
</p>
<h2>Bootstrap Toggle Button</h2>
<div class="bd-example">
<bootstrap-toggle-button checked> Checked</bootstrap-toggle-button>
<bootstrap-toggle-button>Unchecked</bootstrap-toggle-button>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-toggle-button checked>Checked</bootstrap-toggle-button>
<bootstrap-toggle-button>Unchecked</bootstrap-toggle-button></pre>
</figure>
<p>
Add the <b>checked</b> attribute to toggle a button’s active state. If you’re pre-toggling a button,
you must manually add the <b>checked</b> attribute to the button.
</p>
<h2>Bootstrap Radio Button</h2>
<div class="bd-example">
<bootstrap-radio-button checked> Active</bootstrap-radio-button>
<bootstrap-radio-button>Radio</bootstrap-radio-button>
<bootstrap-radio-button>Radio</bootstrap-radio-button>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-radio-button checked> Active</bootstrap-radio-button>
<bootstrap-radio-button>Radio</bootstrap-radio-button>
<bootstrap-radio-button>Radio</bootstrap-radio-button></pre>
</figure>
<p>
Radio buttons are group elements that allow only one of them to be checked. Similar to the other
toggle elements to set a button into checked state the property <b>checked</b> has to be applied to
the element.
All elements that have the same <b>group</b> property are considered to be in the same group.
<b>group</b> can be set on initialization.
</p>
<h2 id="dropDowns">Bootstrap Dropdowns</h2>
<p>
Dropdowns are toggleable, contextual overlays for displaying lists of links and more.
They’re toggled by clicking, not by hovering; this is an intentional design decision.
Dropdowns are built using the <b>Smart Framework's DropDownPositioning API</b>, which provides
dynamic positioning and viewport detection.
No additional references are required since the API is part of the base class
<b>smartelements.js</b>.
</p>
<p>
Bootstrap’s dropdowns are designed to be generic and applicable to a variety of situations and
markup structures.
For instance, it is possible to create dropdowns that contain additional inputs and form controls,
such as search fields or login forms.
However, Bootstrap does add built-in support for most standard keyboard menu interactions, such as
the ability to move through individual .dropdown-item elements using the cursor keys and close the
menu with the ESC key.
</p>
<p>
In order for a DropDown item to visually appear as an item it is neccessary to add the class
<b>.dropdown-item</b>.
</p>
<div class="bd-example">
<bootstrap-drop-down label="Dropdown button">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-drop-down label="Dropdown button">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down></pre>
</figure>
<p>
<b>label</b> property is used to set the label of the drop down button.
</p>
<h2>Dropdown varians</h2>
<div class="bd-example">
<div class="btn-group">
<bootstrap-drop-down label="Primary" style-mode="primary">
<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>
</bootstrap-drop-down>
</div>
<div class="btn-group">
<bootstrap-drop-down label="Secondary" style-mode="secondary">
<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>
</bootstrap-drop-down>
</div>
<div class="btn-group">
<bootstrap-drop-down label="Success" style-mode="success">
<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>
</bootstrap-drop-down>
</div>
<div class="btn-group">
<bootstrap-drop-down label="Info" style-mode="info">
<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>
</bootstrap-drop-down>
</div>
<div class="btn-group">
<bootstrap-drop-down label="Warning" style-mode="warning">
<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>
</bootstrap-drop-down>
</div>
<div class="btn-group">
<bootstrap-drop-down label="Danger" style-mode="danger">
<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>
</bootstrap-drop-down>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<!-- Example single danger button -->
<bootstrap-drop-down label="Danger" style-mode="danger">
<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>
</bootstrap-drop-down></pre>
</figure>
<p>
<b>StyleMode</b> determines the style of the DropDown.
</p>
<h2>Bootstrap Split Button</h2>
<p>
Similarly, create split button dropdowns with virtually the same markup as single button dropdowns,
but with the addition of .dropdown-toggle-split for proper spacing around the dropdown caret.
We use this extra class to reduce the horizontal padding on either side of the caret by 25% and
remove the margin-left that’s added for regular button dropdowns.
Those extra changes keep the caret centered in the split button and provide a more appropriately
sized hit area next to the main button.
</p>
<div class="bd-example">
<bootstrap-split-button label="Dropdown button">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button>
</div>
<h2>Split Button varians</h2>
<div class="bd-example">
<div class="btn-group">
<bootstrap-split-button label="Primary" style-mode="primary">
<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>
</bootstrap-split-button>
</div>
<div class="btn-group">
<bootstrap-split-button label="Secondary" style-mode="secondary">
<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>
</bootstrap-split-button>
</div>
<div class="btn-group">
<bootstrap-split-button label="Success" style-mode="success">
<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>
</bootstrap-split-button>
</div>
<div class="btn-group">
<bootstrap-split-button label="Info" style-mode="info">
<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>
</bootstrap-split-button>
</div>
<div class="btn-group">
<bootstrap-split-button label="Warning" style-mode="warning">
<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>
</bootstrap-split-button>
</div>
<div class="btn-group">
<bootstrap-split-button label="Danger" style-mode="danger">
<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>
</bootstrap-split-button>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<!-- Example single danger button -->
<bootstrap-split-button label="Danger" style-mode="danger">
<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>
</bootstrap-split-button></pre>
</figure>
<h2>Sizing</h2>
<p>Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.</p>
<div class="bd-example">
<div class="btn-toolbar">
<bootstrap-drop-down label="Large button" size-mode="lg">
<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>
</bootstrap-drop-down>
<bootstrap-split-button label="Large split button" size-mode="lg" class="ml-2">
<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>
</bootstrap-split-button>
</div>
<div class="btn-toolbar">
<bootstrap-drop-down label="Small button" size-mode="sm">
<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>
</bootstrap-drop-down>
<bootstrap-split-button label="Small split button" size-mode="sm" class="ml-2">
<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>
</bootstrap-split-button>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<!-- Large button groups (default and split) -->
<bootstrap-drop-down label="Large button" size-mode="lg">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<bootstrap-split-button label="Large split button" size-mode="lg">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button>
<!-- Small button groups (default and split) -->
<bootstrap-drop-down label="Small button" size-mode="sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<bootstrap-split-button label="Small split button" size-mode="sm">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button></pre>
</figure>
<p>
Similar to the other buttons the <b>sizeMode</b> property determines the size of the component.
</p>
<h2>Directions</h2>
<h2>Dropup</h2>
<p>Trigger dropdown menus above elements by adding changing the <b>dropDownPosition</b> property to
'top' to the parent element.</p>
<div class="bd-example">
<div class="btn-toolbar">
<bootstrap-drop-down label="Dropup" drop-down-position="top">
<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>
</bootstrap-drop-down>
<bootstrap-split-button label="Split droppup" class="ml-2" drop-down-position="top">
<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>
</bootstrap-split-button>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<!-- Default dropright button -->
<bootstrap-drop-down label="Dropup" drop-down-position="top"">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<!-- Split dropright button -->
<bootstrap-split-button label="Split dropup" drop-down-position="top">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button></pre>
</figure>
<h2>Dropright</h2>
<p>Trigger dropdown menus at the right of the elements by adding changing the <b>dropDownPosition</b>
property to
'right' to the parent element.</p>
<div class="bd-example">
<div class="btn-toolbar">
<bootstrap-drop-down label="Dropright" drop-down-position="right">
<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>
</bootstrap-drop-down>
<bootstrap-split-button label="Split dropright" class="ml-2" drop-down-position="right">
<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>
</bootstrap-split-button>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<!-- Default dropright button -->
<bootstrap-drop-down label="Dropright" drop-down-position="right"">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<!-- Split dropright button -->
<bootstrap-split-button label="Split dropright" drop-down-position="right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button></pre>
</figure>
<h2>Dropleft</h2>
<p>Trigger dropdown menus at the left of the elements by adding changing the <b>dropDownPosition</b>
property to
'left' to the parent element.</p>
<div class="bd-example">
<div class="btn-toolbar">
<bootstrap-drop-down label="Dropleft" drop-down-position="left">
<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>
</bootstrap-drop-down>
<bootstrap-split-button label="Split dropleft" class="ml-2" drop-down-position="left">
<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>
</bootstrap-split-button>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<!-- Default dropleft button -->
<bootstrap-drop-down label="Dropleft" drop-down-position="left"">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-drop-down>
<!-- Split dropleft button -->
<bootstrap-split-button label="Split dropleft" drop-down-position="left">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</bootstrap-split-button></pre>
</figure>
<h2>Menu items</h2>
<p>Optionally you can use <button> elements in your dropdowns instead of just <a>'s.</p>
<div class="bd-example">
<bootstrap-drop-down label="Dropdown">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-drop-down label="Dropdown">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down></pre>
</figure>
<h2>Custom alignment</h2>
<p>If you want to use custom positioning instead of the dynamic, create a callback and pass it to the
<b>customDropDownPositionCallback</b> property.</p>
<p>To align right the dropdown menu with the given breakpoint or larger, add
.dropdown-menu{-sm|-md|-lg|-xl}-right to the drop down.</p>
<div class="bd-example">
<bootstrap-drop-down label="Left-aligned but right aligned when large screen"
custom-drop-down-position-callback="customDropDownPositioning">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-drop-down label="Left-aligned but right aligned when large screen" custom-drop-down-position-callback="customDropDownPositioning">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down></pre>
</figure>
<p>To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-right and
.dropdown-menu{-sm|-md|-lg|-xl}-left to the drop down.</p>
<div class="bd-example">
<bootstrap-drop-down label="Right-aligned but left aligned when large screen"
custom-drop-down-position-callback="customDropDownPositioning">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-drop-down label="Right-aligned but left aligned when large screen" custom-drop-down-position-callback="customDropDownPositioning">
<button class="dropdown-item" type="button">Action</button>
<button class="dropdown-item" type="button">Another action</button>
<button class="dropdown-item" type="button">Something else here</button>
</bootstrap-drop-down></pre>
</figure>
<h2>Menu content</h2>
<h2 id="headers">Headers</h2>
<p>Add a header to label sections of actions in any dropdown menu.</p>
<div class="bd-example">
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#headers">Action</a>
<a class="dropdown-item" href="#headers">Another action</a>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<div class="dropdown-menu">
<h6 class="dropdown-header">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
</div></pre>
</figure>
<h2 id="dividers">Dividers</h2>
<p>Separate groups of related menu items with a divider.</p>
<div class="bd-example">
<div class="dropdown-menu">
<a class="dropdown-item" href="#dividers">Action</a>
<a class="dropdown-item" href="#dividers">Another action</a>
<a class="dropdown-item" href="#dividers">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#dividers">Separated link</a>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separate link</a>
</div></pre>
</figure>
<h2 id="text">Text</h2>
<p>Place any freeform text within a dropdown with text and use spacing utilities. Note that you’ll
likely need additional sizing styles to constrain the menu width.</p>
<div class="bd-example">
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;">
<p>
Some example text that's free-flowing within the dropdown menu.
</p>
<p class="mb-0">
And this is more example text.
</p>
</div></pre>
</figure>
<h2>Methods</h2>
<p>
Public methods can be called directly on the element.
</p>
<table>
<thead>
<tr>
<th>Method</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="highlighter-rouge">toggle()</code></td>
<td>Toggles the dropdown.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">show()</code></td>
<td>Shows the dropdown.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">hide()</code></td>
<td>Hides the dropdown menu.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">update()</code></td>
<td>Updates the position of an element’s dropdown.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">dispose()</code></td>
<td>Destroys the element.</td>
</tr>
</tbody>
</table>
<h2>Events</h2>
<p>
Events are fired directly from the element.
</p>
<table>
<thead>
<tr>
<th>Event</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="highlighter-rouge">show</code></td>
<td>This event fires immediately when the show instance method is called.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">shown</code></td>
<td>This event is fired when the dropdown has been made visible to the user (will wait for
CSS transitions, to complete).</td>
</tr>
<tr>
<td><code class="highlighter-rouge">hide</code></td>
<td>This event is fired immediately when the hide instance method has been called.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">hidden</code></td>
<td>This event is fired when the dropdown has finished being hidden from the user (will wait
for CSS transitions, to complete).</td>
</tr>
</tbody>
</table>
<p>
Binding to events is easy and simple:
</p>
<figure class="highlight">
<pre class="prettyprint">
document.querySelector('bootstrap-drop-down').addEventListener('show', function(){
//do something...
})</pre>
</figure>
<h2 id="inputGroups">Bootstrap Input Groups</h2><br />
<p>Easily extend form controls by adding text, buttons, or button groups on either side of textual
inputs, custom selects, and custom file inputs.</p>
</br>
<h2>Basic example</h2>
<p>
Place one add-on or button on either side of an input. You may also place one on both sides of an
input. Remember to place <label>s outside the input group.
</p>
<div class="bd-example">
<bootstrap-input-group class="mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<input type="text" class="form-control" placeholder="Recipient's username"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</bootstrap-input-group>
<label for="basic-url">Your vanity URL</label>
<bootstrap-input-group class="mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</bootstrap-input-group>
<bootstrap-input-group>
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</bootstrap-input-group>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-input-group class="mb-3">
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-text" id="basic-addon2">@example.com</span>
</bootstrap-input-group>
<label for="basic-url">Your vanity URL</label>
<bootstrap-input-group class="mb-3">
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
</bootstrap-input-group>
<bootstrap-input-group class="mb-3">
<span class="input-group-text">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-text">.00</span>
</bootstrap-input-group>
<bootstrap-input-group>
<span class="input-group-text">With textarea</span>
<textarea class="form-control" aria-label="With textarea"></textarea>
</bootstrap-input-group></pre>
</figure>
<h2>Wrapping</h2>
<p>
Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field
validation within an input group. You may disable this with the <b>noWrap</b> property.
</p>
<div class="bd-example">
<bootstrap-input-group no-wrap>
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username"
aria-describedby="basic-addon1">
</bootstrap-input-group>
</div>
<div class="bd-clipboard">
<div class="simple-tooltip">
<button type="button" class="btn-clipboard" onclick="onClick()" onmouseout="onMouseOut()">
<span class="tooltip-text">Copy to clipboard</span>Copy</button>
</div>
</div>
<figure class="highlight">
<pre class="prettyprint">
<bootstrap-input-group no-wrap>
<span class="input-group-text" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</bootstrap-input-group></pre>
</figure>
<h2>Sizing</h2>
<p>
Add the <b>sizeMode</b> property in order to change the size of the input group.
</p>
<div class="bd-example">
<bootstrap-input-group size-mode="sm" class="mb-3">
<span class="input-group-text">Small</span>
</bootstrap-input-group>