A button gives thes user a way to trigger an immediate action. The colors used for the bakground and text of buttons have been vetted to meet a minimum color contrast ratio of 4.5:1 for accesibility purposes.
<div class="btn-group">
<a class="btn btn-primary">Primary</a>
<a class="btn btn-default">Secondary</a>
<a class="btn btn-link">Button link</a>
</div>
<div class="btn-group">
in order to receive their proper vertical and horizontal spacing..btn-
classes on the <a>
, <button>
, or <input>
tags..btn-primary
indicates the primary action..btn-secondary
indicates the default action..btn-link
is used when the user needs a lighter-weight appearance..btn-success
, .btn-info
, .btn-warning
, and .btn-danger
are optional classes that come from Bootstrap.disabled
attribute can be applied to the <a>
, <button>
, or <input>
tags..active
class can be applied to the <a>
tag to pre-select a button.<div class="btn-group">
<a class="btn btn-block btn-primary">Primary</a>
<a class="btn btn-block btn-secondary">Secondary</a>
<a class="btn btn-block btn-link">Button link</a>
</div>
<a>
, <button>
, or <input>
tag: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
..btn-block
class on the <a>
, <button>
, or <input>
tags to make them full-width and stacked.<div class="btn-group">
<button type="button" autocomplete="off" class="btn btn-default" data-toggle="button" aria-pressed="false">Toggle Button</button>
<button type="button" autocomplete="off" class="btn btn-default theme-dark" data-toggle="button" aria-pressed="false" disabled>Disabled</button>
</div>
<script>
$("[data-toggle='button']").button("toggle");
</script>
<button>
tag: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
..active
class to the <button>
tag to pre-select the button.disabled
attribute can be applied to the <button>
tag.<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="checkbox" autocomplete="off"> Checkbox 1
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"> Checkbox 2
</label>
<label class="btn btn-default">
<input type="checkbox" autocomplete="off"> Checkbox 3
</label>
</div>
<label>
tag: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
..active
class to the <label>
tag to pre-select the button.disabled
attribute can be applied to the <label>
tag.<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" name="options" id="option1" autocomplete="off"> Radio 1
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
</label>
<label class="btn btn-default">
<input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
</label>
</div>
<label>
tag: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
..active
class to the <label>
tag to pre-select the button.disabled
attribute can be applied to the <label>
tag.<div class="btn-group">
<button type="button" data-toggle="button" class="btn btn-toggle-switch" autocomplete="off" aria-pressed="false">
<span class="stateLabel stateLabel-on">On</span>
<span class="stateLabel stateLabel-off">Off</span>
</button>
</div>
<button>
tag: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
..active
class to the <button>
tag to put the toggle switch in the On position.disabled
attribute can be applied to the <button>
tag.Individual form controls automatically receive some global styling. By default, <input>
, <textarea>
, and <select>
elements with the .form-control
class are set to a recommended width of 296px by setting max-width: 296px
.
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="form-group">
<p class="form-group-label">Checkbox</p>
<div class="checkbox">
<label>
<input type="checkbox"></input>
<span>Rest</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" checked></input>
<span>Checked</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" disabled="true"></input>
<span>Disabled</span>
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="foo"></input>
<span>Indeterminate</span>
</label>
<script type="text/javascript">
(function () {
$("#foo").prop("indeterminate", true);
})();
</script>
</div>
</div>
<div class="form-group">
<p class="form-group-label">Radio buttons</p>
<div class="radio">
<label>
<input type="radio" name='radio1'>
<span>Radio</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name='radio1' checked="checked">
<span>Checked</span>
</label>
</div>
<div class="radio">
<label>
<input type="radio" name='radio1' disabled="true">
<span>Disabled</span>
</label>
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<div class="form-group">
for optimum spacing.<form>
or <div class="form-group">
tags: .theme-default
, .theme-alt
or .theme-dark
. Note: if <button>
is inside <form>
or .form-group
, it does not automatically inherit the theme class.
See documentation on Buttons for applying theme classes.disabled
attribute can be applied to the <input>
tags for all the form controls above..checkbox-indeterminate
class to the <input type="checkbox">
tag along with the required JavaScript.checked
attribute is placed within the input tag of either checkbox or radio to indicate the it is pre-selected.<form>
<div class="form-group">
<label>Text</label>
<input type='text' class='form-control'/>
</div>
<div class="form-group">
<label class="disabled">Text</label>
<input type='text' class='form-control' value="Disabled value" disabled="disabled" />
</div>
<div class="form-group">
<label>Text Area</label>
<textarea class='form-control'></textarea>
</div>
</form>
<form>
or <div class="form-group">
tags: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
.disabled
attribute can be applied to the <input>
or <textarea>
tags.<form>
<div class="form-group">
<div class="combobox">
<select class="form-control">
<option>Lorem</option>
<option>ipsum</option>
<option>dolor</option>
<option>sit</option>
<option>amet</option>
</select>
</div>
</div>
<div class="form-group">
<select multiple class="form-control">
<option>Lorem</option>
<option>ipsum</option>
<option>dolor</option>
<option>sit</option>
<option>amet</option>
</select>
</div>
</form>
<form>
tag: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
.disabled
attribute can be applied to the <select>
tags above. <div class="putbox">
<div class="putbox-icon">
<span class="glyph glyph-clock"></span>
</div>
<div class="putbox-content">
<div class="content-title">Time format:</div>
<form class="content-form">
<input type="text" class="form-control" value="H:i"/>
</form>
</div>
</div>
<div class="putbox">
<div class="putbox-icon">
<span class="glyph glyph-picture"></span>
</div>
<div class="putbox-content">
<div class="content-title">New photos will save to:</div>
<form class="content-form">
<div class="combobox">
<select class="form-control">
<option>This PC (C:)</option>
<option>Local Disk (D:)</option>
</select>
</div>
</form>
<a href="#" class="btn btn-link btn-block">Advanced options</a>
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar"
aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
style="width: 60%;">
<span class="sr-only">60%</span>
</div>
</div>
<div class="progress">
tag: .theme-default
, .theme-alt
or .theme-dark
.
<div class="progress-ring">
<div class="progress-circle"></div>
<div class="progress-circle"></div>
<div class="progress-circle"></div>
<div class="progress-circle"></div>
<div class="progress-circle"></div>
</div>
.progress-medium
class to the outer <div class="progress-ring">
in order to get the medium-sized ring. Add the .progress-large
class for the large-sized ring.text-align
to center
. E.g. <div style="text-align: center">
.
<div class="progress-bar">
<div class="progress-circle"></div>
<div class="progress-circle"></div>
<div class="progress-circle"></div>
<div class="progress-circle"></div>
<div class="progress-circle"></div>
</div>
text-align
to center
. E.g. <div style="text-align: center">
.This is a simple dropdown menu with links inside. The dropdown code has specific accessibility settings.
<div class="dropdown">
<button id="example-dropdown" class="btn btn-dropdown dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" role="button" aria-expanded="false">
Dropdown sample
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown-example">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#" class="disabled">Disabled</a></li>
</ul>
</div>
<div class="dropdown">
tag: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
.disabled
attribute can be applied to the <button>
tag to disable the control or the .disabled
class can be applied to an <a>
tag to disable an item in the dropdown menu.This is a simple tooltip on top (default). On the left. On the bottom. On the right.
You can also place them on buttons.
Tooltips are also available in alt color.
To enable the tooltip on the HTML:
<span data-toggle="tooltip" title="Tooltip content">
Has a tooltip
</span>
<span data-toggle="tooltip">
tag: .theme-default
, .theme-alt
, .theme-light
or .theme-dark
.data-placement
attribute can be set to the following values: top
, right
, bottom
or left
and governs the placement of the tooltip with respect to the entry point. It is applied to the <span data-toggle="tooltip">
tag. The default value is top
.And the required JavaScript initialization:
$(function () {
$('[data-toggle="tooltip"]').tooltip({
template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>'
});
});
Flyouts, referred to as Popovers by Bootstrap, expose small overlays of content when an element is selected.
Four flyout directions are available: left, top, bottom, and right aligned. Indicate the direction in the data-placement
attribute.
Indicate the flyout's color theme in the data-theme
attribute.
<button type="button"
class="btn btn-primary"
data-toggle="popover"
data-content="Flyout content">
Toggle flyout
</button>
data-theme
attribute can be set to the following values: theme-default
, theme-alt
, theme-light
or theme-dark
. It is applied to the <button>
tag.data-placement
attribute can be set to the values: top
, right
, bottom
or left
and governs the placement of the flyout with respect to the entry point. It is applied to the <button>
tag. The default value is right
.$(function () {
$('[data-toggle="popover"]').each(function () {
var $element = $(this);
$element.popover({
template: '<div class="popover" role="tooltip"><div class="popover-content"></div></div>'
}).data('bs.popover').tip().addClass($element.data("theme"));
});
});
<a role="button"
class="btn btn-primary"
tabindex="0"
data-toggle="popover"
data-trigger="focus"
data-content="Flyout content">
Dismissible flyout
</a>
<a>
tag, not the <button>
tag, and must include the role="button"
and tabindex
attributes.data-theme
attribute can be set to the following values: theme-default
, theme-alt
, theme-light
or theme-dark
. It is applied to the <a>
tag.data-placement
attribute can be set to the following values: top
, right
, bottom
or left
and governs the placement of the flyout with respect to the entry point. It is applied to the <a>
tag. The default value is right
.$(function () {
$('[data-toggle="popover"]').each(function () {
var $element = $(this);
$element.popover({
template: '<div class="popover" role="tooltip"><div class="popover-content"></div></div>'
}).data('bs.popover').tip().addClass($element.data("theme"));
});
});
Adding a button inside of a flyout can be triggered with JavaScript. Insert id="#btn-close"
within the html to call the flyout content specified in the script tags.
<button type="button"
role="button"
id="btn-close"
class="btn btn-primary">
Flyout with button
</button>
onclick="$("#btn-close").popover("hide");"
element from the JS below.data-theme
attribute can be set to the following values: theme-default
, theme-alt
, theme-light
or theme-dark
. It is applied to the <button>
tag.$(function () {
if ($('#btn-close').length) {
$('#btn-close').popover({
placement: 'right',
html: 'true',
content: 'This is a flyout with a button. <button type="button" class="btn btn-primary ' + $('#btn-close').data("theme") + '"onclick="$("#btn-close").popover("hide");">Button</button>',
template: '<div class="popover" role="tooltip"><div class="popover-content"></div></div>'
}).data('bs.popover').tip().addClass($('#btn-close').data("theme"));
}
});
Example with a button to launch the dialog:
<div class="btn-group">
<button type="button" class="btn btn-primary btn-lg"
data-toggle="modal"
data-target="#modal-sample">
Launch demo dialog
</button>
</div>
Launching the dialog with the JavaScript API:
$('#modal-sample').modal('show');
Closing the dialog with the JavaScript API:
$('#modal-sample').modal('hide');
By default the dialog is already in the DOM:
<div class="modal" id="modal-sample"
tabindex="-1" role="dialog"
aria-labelledby="modal-sample-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="modal-sample-label">
Dialog title
</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">
Button
</button>
<button type="button" class="btn btn-info"
data-dismiss="modal">
Cancel
</button>
</div>
</div>
</div>
</div>
<div class="modal">
tag: .theme-default
or .theme-alt
..modal-center-vertical
class to the <div class="modal">
tag in order to center the dialog vertically.The Bootstrap Tabs component is styled to match the MDL Pivot control.
Pivots are available in the alt theme as well.
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
<ul>
tag: .theme-default
or .theme-alt
.<nav class="navbar navbar-default">
<div class="navbar-global theme-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<i class="glyph glyph-hamburger"></i>
</button>
<a href="http://www.microsoft.com" class="navbar-brand">
<img src="https://assets.onestore.ms/cdnfiles/onestorerolling-1511-11008/shell/v3/images/logo/microsoft.png" alt="Microsoft" height="23" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="colors.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Store <i class="glyph glyph-chevron-down-2"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="colors.html">Store home</a></li>
<li class="divider"></li>
<li><a href="colors.html#bootstrap-colors">Devices</a></li>
<li><a href="colors.html#mdl-colors">Software</a></li>
<li><a href="colors.html#mdl-alt-colors">Apps</a></li>
<li><a href="colors.html#mdl-alt-colors">Games</a></li>
<li><a href="colors.html#mdl-alt-colors">Entertainment</a></li>
<li><a href="colors.html#mdl-alt-colors">Business & education</a></li>
<li><a href="colors.html#mdl-alt-colors">Sale</a></li>
<li><a href="colors.html#mdl-alt-colors">Find a store</a></li>
<li><a href="colors.html#mdl-alt-colors">Gift cards</a></li>
</ul>
</li>
<li class="dropdown">
<a href="typography.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Products <i class="glyph glyph-chevron-down-2"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="typography.html">Software & services</a></li>
<li><a href="typography.html#fonts">Devices & Xbox</a></li>
<li><a href="typography.html#sizes">For business</a></li>
<li><a href="typography.html#headings">For developers & IT pros</a></li>
<li><a href="typography.html#subheadings">For students & educators</a></li>
</ul>
</li>
<li class="dropdown">
<a href="layout.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Support <i class="glyph glyph-chevron-down-2"></i></a>
<ul class="dropdown-menu" role="menu">
<li><a href="layout.html">Windows</a></li>
<li><a href="layout.html#page-header">Office</a></li>
<li><a href="layout.html#grid">Surface</a></li>
<li><a href="layout.html#grid-small-gutters">Xbox</a></li>
<li><a href="layout.html#spacers">Windows phone</a></li>
<li><a href="layout.html#spacers">By resource</a></li>
<li><a href="layout.html#spacers">Security & updates</a></li>
<li><a href="layout.html#spacers">Popular topics</a></li>
<li><a href="layout.html#spacers">Sales & orders</a></li>
<li><a href="layout.html#spacers">Contact us</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="search" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default"></button>
</form>
</div>
</div>
</div>
<div class="navbar-local color-accent theme-dark">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<i class="glyph glyph-hamburger"></i>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="glyph glyph-chevron-down-2"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <i class="glyph glyph-chevron-down-2"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
.navbar-left
or .navbar-right
utility classes..container
or .container-fluid
in .navbar-global
or .navbar-local
..navigation-global
will give you a 48px navbar and .navigation-local
will give you a 72px navbar..compressed
with .navbar-nav
will create extra space at $vp4
if you have too many/too long nav items. If your nav still doesn't fit when using .compressed
then consider using less nav items or renaming long nav items..navbar-global
and .navbar-local
and are applied as siblings (ex: .navbar-global.theme-default
).theme-dark
works with $color-accent
and applies all the right interactive states accordingly.