Controls

Push button

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.

Default

Primary Secondary Button link 
<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>
  • All buttons should be wrapped in a <div class="btn-group"> in order to receive their proper vertical and horizontal spacing.
  • Use the .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.
  • The disabled attribute can be applied to the <a>, <button>, or <input> tags.
  • The .active class can be applied to the <a> tag to pre-select a button.

Alt

Primary Secondary Button link

On solid color

Primary Secondary Button link

On light image

Primary Secondary Button link

On dark image

Primary Secondary Button link 
<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>
  • In addition to those options listed above for Push Buttons, the following theme classes can be applied to the <a>, <button>, or <input> tag: .theme-default, .theme-alt, .theme-light or .theme-dark.
  • Use the .btn-block class on the <a>, <button>, or <input> tags to make them full-width and stacked.

Toggle Button

Default

Alt

On solid color

On light image

On dark image

<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>
  • The following theme classes can be applied to the <button> tag: .theme-default, .theme-alt, .theme-light or .theme-dark.
  • Apply the .active class to the <button> tag to pre-select the button.
  • The disabled attribute can be applied to the <button> tag.

Checkbox Toggle Button

Default

Alt

On solid color

On light image

On dark image

<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>
  • The following theme classes can be applied to the <label> tag: .theme-default, .theme-alt, .theme-light or .theme-dark.
  • Apply the .active class to the <label> tag to pre-select the button.
  • The disabled attribute can be applied to the <label> tag.

Radio Toggle Buttons

Default

Alt

On Solid Color

On light image

On Dark Image

<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>
  • The following theme classes can be applied to the <label> tag: .theme-default, .theme-alt, .theme-light or .theme-dark.
  • Apply the .active class to the <label> tag to pre-select the button.
  • The disabled attribute can be applied to the <label> tag.

Toggle Switch

Default

Alt

On solid color

On light image

On dark image

<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>
  • The following theme classes can be applied to the <button> tag: .theme-default, .theme-alt, .theme-light or .theme-dark.
  • Apply the .active class to the <button> tag to put the toggle switch in the On position.
  • The disabled attribute can be applied to the <button> tag.

Forms

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.

Default theme

Example block-level help text here.

Checkbox

Radio buttons

Alt theme

Example block-level help text here.

Checkbox

Radio buttons

Dark Theme

Example block-level help text here.

Checkbox

Radio buttons

<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>
  • Wrap labels and controls in <div class="form-group"> for optimum spacing.
  • The following theme classes can be applied to the <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.
  • The disabled attribute can be applied to the <input> tags for all the form controls above.
  • To get an indeterminate checkbox, apply the .checkbox-indeterminate class to the <input type="checkbox"> tag along with the required JavaScript.
  • The checked attribute is placed within the input tag of either checkbox or radio to indicate the it is pre-selected.

Text Input

Default

Alt

On solid color

On light image

On dark image

<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>
  • The following theme classes can be applied to the <form> or <div class="form-group"> tags: .theme-default, .theme-alt, .theme-light or .theme-dark.
  • The disabled attribute can be applied to the <input> or <textarea> tags.

Combo

Default

Alt

On solid color

On light image

On dark image

<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>
  • The following theme classes can be applied to the <form> tag: .theme-default, .theme-alt, .theme-light or .theme-dark.
  • The disabled attribute can be applied to the <select> tags above.

Put Box

Default

Time format:
New photos will save to:
Advanced options

Alt

Time format:
New photos will save to:
Advanced options 
    <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>

Progress

Determinate progress bar

60% Complete
60% Complete
60% Complete 
<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>
  • The following theme classes can be applied to the <div class="progress"> tag: .theme-default, .theme-alt or .theme-dark.

Indeterminate Progress

Progress Ring

<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>
  • The default size is shown in the first example above. Add the .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.
    • To center the progress bar, the parent control should have text-align to center. E.g. <div style="text-align: center">.

Progress Bar

<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>
  • To center the progress bar, the parent control should have text-align to center. E.g. <div style="text-align: center">.

Tooltips

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>
  • The following theme classes can be applied to the <span data-toggle="tooltip"> tag: .theme-default, .theme-alt, .theme-light or .theme-dark.
  • The 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

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>
  • The 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.
  • The 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"));
        });
    });

Dismissible flyout

To dismiss flyouts on the next click, use the focus trigger.

Dismissible flyout 
<a role="button"
       class="btn btn-primary"
       tabindex="0"
       data-toggle="popover"
       data-trigger="focus"
       data-content="Flyout content">
       Dismissible flyout
    </a>
  • Dismissible flyouts also require use of the <a> tag, not the <button> tag, and must include the role="button" and tabindex attributes.
  • The 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.
  • The 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"));
        });
    });

Closing button

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>
  • To add a button that doesn't close the flyout when clicked, remove the onclick="$("#btn-close").popover("hide");" element from the JS below.
  • The 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="$(&quot;#btn-close&quot;).popover(&quot;hide&quot;);">Button</button>',
                template: '<div class="popover" role="tooltip"><div class="popover-content"></div></div>'
            }).data('bs.popover').tip().addClass($('#btn-close').data("theme"));
        }
    });

Dialogs

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>
  • The following theme classes can be applied to the <div class="modal"> tag: .theme-default or .theme-alt.
  • Add the .modal-center-vertical class to the <div class="modal"> tag in order to center the dialog vertically.

Tabs

The Bootstrap Tabs component is styled to match the MDL Pivot control.


Pivots are available in the alt theme as well.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat sollicitudin dui mollis imperdiet. Nam fringilla sed odio sit amet luctus. In hac habitasse platea dictumst. Nunc non nulla in quam porttitor pretium eget congue metus. Morbi volutpat nisl ut urna interdum mollis. Cras pretium nisi vel neque vulputate, a luctus purus dictum. Mauris non mauris semper, consectetur nisi id, lacinia libero. Curabitur ante diam, viverra at sagittis quis, ullamcorper quis felis. Curabitur maximus tellus non sagittis finibus. Nullam ut dolor tincidunt nisi fermentum suscipit. Maecenas eleifend lorem sit amet massa tristique facilisis. Nunc varius velit et magna suscipit gravida. Phasellus lobortis congue magna ut iaculis. Sed sodales ut tortor a interdum. Maecenas sagittis augue augue, eu sollicitudin libero volutpat eu. Phasellus tempor lobortis gravida.
Integer in libero dapibus, finibus est at, ultricies ligula. Quisque euismod sodales cursus. Fusce finibus volutpat ex, sit amet molestie tortor. Integer pellentesque accumsan lectus viverra vehicula. Suspendisse porttitor arcu risus, a lacinia ligula sodales eu. Morbi consectetur sem at ex aliquet venenatis non id erat. Duis fermentum risus id massa auctor auctor. Nam hendrerit posuere laoreet. Praesent nisl libero, euismod eget faucibus quis, dignissim at tortor. Morbi nec neque vel diam maximus ultrices. Nam condimentum imperdiet metus, et lobortis enim vulputate non. Nam et neque enim. Quisque in blandit nunc, eu ornare tellus. Integer eget urna tincidunt libero maximus accumsan.
Morbi porta elit vel ante tempus, vel fringilla augue tincidunt. Donec vehicula lorem velit, at pulvinar purus maximus at. Sed id libero interdum, pellentesque magna eu, varius ex. Morbi quis leo consequat, tempor massa ut, gravida enim. Nam a neque in turpis dapibus varius ut ut tortor. Cras sagittis massa nisi. Aliquam mollis, lectus molestie finibus vulputate, neque sem posuere tellus, eu dapibus erat massa id tortor. Vivamus sed dictum sapien, et tristique odio. Quisque ac ligula viverra, sollicitudin sapien in, sollicitudin est. Cras ultrices malesuada porttitor. Nunc non enim eget eros gravida sodales.
Suspendisse scelerisque neque nisi, a luctus arcu aliquet sit amet. Nullam vel consectetur mi. Nam imperdiet, tellus id accumsan posuere, risus eros tempor libero, a facilisis lacus dolor vitae sem. Fusce dolor leo, hendrerit sagittis diam sed, sodales luctus felis. Aenean accumsan ullamcorper ipsum, tincidunt tempor metus blandit sit amet. Duis sagittis gravida purus vel bibendum. Aliquam sagittis ligula a elementum interdum. Duis placerat ligula lorem. 

<!-- 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>
  • The following theme classes can be applied to the <ul> tag: .theme-default or .theme-alt.

Navbar 

<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 &amp; 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 &amp; services</a></li>
                                <li><a href="typography.html#fonts">Devices &amp; Xbox</a></li>
                                <li><a href="typography.html#sizes">For business</a></li>
                                <li><a href="typography.html#headings">For developers &amp; IT pros</a></li>
                                <li><a href="typography.html#subheadings">For students &amp; 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 &amp; updates</a></li>
                                <li><a href="layout.html#spacers">Popular topics</a></li>
                                <li><a href="layout.html#spacers">Sales &amp; 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>
  • The Winstrap navbar supports all of the options from the Bootstrap navbar.
  • Align nav links, forms, buttons, or text, using the .navbar-left or .navbar-right utility classes.
  • To use global and local navigation bars together (as seen above and on Microsoft web sites) use the standard bootstrap markup, wrapping .container or .container-fluid in .navbar-global or .navbar-local.
  • When using a single navigation bar, .navigation-global will give you a 48px navbar and .navigation-local will give you a 72px navbar.
  • Using .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.
  • Themes require .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.

Side navigation

Large side navigation

Large side nav is a one-level deep side navigation with an optional label. Use in cases where site structure calls for flat, single-level architecture.

Mountain Ranges 
<a class="btn btn-lightweight no-outline navigation-btn">Mountain Ranges</a>
    <nav role="navigation" id="sidenav" class="nav side-navigation side-navigation-large theme-default">
        <div class="navigation-label">Mountain Ranges</div>
        <button type="button" class="close" data-dismiss="side-navigation" aria-label="close">
            <i class="glyph glyph-cancel"></i>
        </button>
        <ul>
            <li><a href="#">The Cascades</a></li>
            <li><a href="#" class="active">The Olympic Mountains</a></li>
            <li><a href="#">The Sierra Nevadas</a></li>
            <li><a href="#">The Rocky Mountains</a></li>
            <li><a href="#">Appalachian Mountains</a></li>
        </ul>
    </nav>
  • Use .active on nav link to denote current page/state in navigation
  • If you have a solid dark color or black background, add .theme-alt at the same level as .side-navigation to get white navigation links.
  • .side-navigation begins as display: none; at $vp1 and becomes visible at $vp3
  • a.navigation-btn is visible on $vp1 and $vp2 to enable toggling visibility of .side-navigation
  • Use your own JavaScript to show/hide navigation on $vp1 and $vp2, though you can use ours below as a reference
if ($('.side-navigation').length) {
        var closeBtn = $('.close');
        var sideAffix = $('.side-navigation-affix');
        var sideBtn = $('a.navigation-btn');
        var sideNav = $('.side-navigation-large');
        var sideSection = $('.navigation-section');
        var sideTopSpacing = 48;
    
        if ($('.side-navigation-small').length) {
            sideNav = $('.side-navigation-small');
        }
    
        var topOffset = sideSection.offset().top - sideTopSpacing;
        var bottomOffset = $('body').height() - sideSection.offset().top - sideSection.height();
    
        sideAffix.affix({
            offset: {
                top: topOffset,
                bottom: bottomOffset
            }
        });
    
        sideAffix.width(sideNav.parent().width());
    
        sideBtn.on('click', function(){
            sideNav.css("display", "block");
            sideSection.css("display", "none");
            sideBtn.css("display", "none");
            $('body').css("overflow", "hidden");
        });
        closeBtn.on('click', function(){
            sideNav.css("display", "");
            sideSection.css("display", "");
            sideBtn.css("display", "inline-block");
            $('body').css("overflow", "");
        });
    }

Small side navigation

Small side nav is a two-level deep side navigation. Use in cases where site structure calls for nested, two-level architecture.

Father John Misty 
<a class="btn btn-lightweight no-outline navigation-btn">Father John Misty</a>
    <ul role="navigation" id="sidenav-small" class="nav side-navigation side-navigation-small theme-default">
        <button type="button" class="close" data-dismiss="side-navigation" aria-label="close">
            <i class="glyph glyph-cancel"></i>
        </button>
    
        <li class="active side-nav-c2">
            <a data-toggle="collapse" data-parent="#sidenav-small" href="#father-john-misty" aria-expanded="true" aria-controls="#father-john-misty">Father John Misty</a>
            <ul class="nav collapse in" id="father-john-misty">
                <li><a href="#sidenav-small">Fear Fun</a></li>
                <li><a href="#sidenav-small" class="active">I Love You Honeybear</a></li>
            </ul>
        </li>
        <li class="side-nav-c2">
            <a data-toggle="collapse" data-parent="#sidenav-small" href="#the-national" aria-expanded="false" aria-controls="#the-national">The National</a>
            <ul class="nav collapse" id="the-national">
                <li><a href="#sidenav-small">The National</a></li>
                <li><a href="#sidenav-small">Songs for Dirty Lovers</a></li>
                <li><a href="#sidenav-small">Alligator</a></li>
                <li><a href="#sidenav-small">Boxer</a></li>
                <li><a href="#sidenav-small">High Violet</a></li>
                <li><a href="#sidenav-small">Trouble Will Find Me</a></li>
            </ul>
        </li>
        <li class="side-nav-c2">
            <a data-toggle="collapse" data-parent="#sidenav-small" href="#the-strokes" aria-expanded="false" aria-controls="#the-strokes">The Strokes</a>
            <ul class="nav collapse" id="the-strokes">
                <li><a href="#sidenav-small">Is this it?</a></li>
                <li><a href="#sidenav-small">Room on Fire</a></li>
                <li><a href="#sidenav-small">First Impressions of Earth</a></li>
                <li><a href="#sidenav-small">Angels</a></li>
                <li><a href="#sidenav-small">Comedown Machine</a></li>
            </ul>
        </li>
        <li class="side-nav-c2">
            <a data-toggle="collapse" data-parent="#sidenav-small" href="#glass-animals" aria-expanded="false" aria-controls="#glass-animals">Glass Animals</a>
            <ul class="nav collapse" id="glass-animals">
                <li><a href="#sidenav-small">Zaba</a></li>
            </ul>
        </li>
        <li class="side-nav-c2">
            <a data-toggle="collapse" data-parent="#sidenav-small" href="#imagine-dragons" aria-expanded="false" aria-controls="#imagine-dragons">Imagine Dragons</a>
            <ul class="nav collapse" id="imagine-dragons">
                <li><a href="#sidenav-small">Night Vision</a></li>
                <li><a href="#sidenav-small">Smoke + Mirrors</a></li>
            </ul>
        </li>
    </ul>
  • Use .active on li.side-nav-c2 and it's child a nav link to denote current selected category and link
  • If you have a solid dark color or black background, add .theme-alt at the same level as .side-navigation to get white navigation links
  • Add .panel to li.side-nav-c2 for full accordion operation
  • .side-navigation begins as display: none; at $vp1 and becomes visible at $vp3
  • a.navigation-btn is visible on $vp1 and $vp2 to enable toggling visibility of .side-navigation
  • Use your own JavaScript to show/hide navigation on $vp1 and $vp2, though you can use the example from .side-navigation-large above as a reference
Back to top