Default Primary Success Info Warning Danger Link

<a href="#" class="btn btn-default">Default</a>
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-success">Success</a>
<a href="#" class="btn btn-info">Info</a>
<a href="#" class="btn btn-warning">Warning</a>
<a href="#" class="btn btn-danger">Danger</a>
<a href="#" class="btn btn-link">Link</a>

Allow Disable

<a href="#" class="btn btn-success">Allow<i class="fa fa-check btn-icon-right"></i></a>
<a href="#" class="btn btn-danger"><i class="fa fa-times btn-icon-left"></i>Disable</a>

Default Primary Success Info Warning Danger

<a href="#" class="btn btn-inverted btn-default">Default</a>
<a href="#" class="btn btn-inverted btn-primary">Primary</a>
<a href="#" class="btn btn-inverted btn-success">Success</a>
<a href="#" class="btn btn-inverted btn-info">Info</a>
<a href="#" class="btn btn-inverted btn-warning">Warning</a>
<a href="#" class="btn btn-inverted btn-danger">Danger</a>

Default Primary Success Info Warning Danger

<a href="#" class="btn btn-inverted btn-bold btn-default">Default</a>
<a href="#" class="btn btn-inverted btn-bold btn-primary">Primary</a>
<a href="#" class="btn btn-inverted btn-bold btn-success">Success</a>
<a href="#" class="btn btn-inverted btn-bold btn-info">Info</a>
<a href="#" class="btn btn-inverted btn-bold btn-warning">Warning</a>
<a href="#" class="btn btn-inverted btn-bold btn-danger">Danger</a>

<a href="#" class="btn btn-inverted-white btn-primary">Primary</a>
<a href="#" class="btn btn-inverted-white btn-success">Success</a>
<a href="#" class="btn btn-inverted-white btn-info">Info</a>
<a href="#" class="btn btn-inverted-white btn-warning">Warning</a>
<a href="#" class="btn btn-inverted-white btn-danger">Danger</a>

<a href="#" class="btn btn-inverted-white-fill btn-primary">Primary</a>
<a href="#" class="btn btn-inverted-white-fill btn-success">Success</a>
<a href="#" class="btn btn-inverted-white-fill btn-info">Info</a>
<a href="#" class="btn btn-inverted-white-fill btn-warning">Warning</a>
<a href="#" class="btn btn-inverted-white-fill btn-danger">Danger</a>

<a href="#" class="btn btn-circular btn-default"><i class="fa fa-pencil"></i></a>
<a href="#" class="btn btn-circular btn-primary"><i class="fa fa-user"></i></a>
<a href="#" class="btn btn-circular btn-success"><i class="fa fa-bug"></i></a>
<a href="#" class="btn btn-circular btn-info"><i class="fa fa-plane"></i></a>
<a href="#" class="btn btn-circular btn-warning"><i class="fa fa-database"></i></a>
<a href="#" class="btn btn-circular btn-danger"><i class="fa fa-cog"></i></a>

Default

Primary

Success

Info

Warning

<div class="btn-group">
    <a href="#" class="btn btn-primary">Primary</a>
    <a href="#" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></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 class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <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>
</div>

<div class="dropdown dropdown-hover">
    <button class="btn btn-default dropdown-toggle" type="button">
        Dropdown
        <span class="caret"></span>
    </button>
    <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>
</div>

<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
        Dropdown
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
        <li><a href="#">Action</a></li>
        <li class="dropdown dropdown-submenu">
            <a href="#">Submenu</span></a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
            </ul>
        </li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater.

<ul class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab" aria-expanded="true">Home</a></li>
    <li><a href="#profile" data-toggle="tab">Profile</a></li>
    <li class="disabled"><a>Disabled</a></li>
    <li class="dropdown">
        <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#dropdown1" data-toggle="tab">Action</a></li>
            <li class="divider"></li>
            <li><a href="#dropdown2" data-toggle="tab">Another action</a></li>
        </ul>
    </li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade active in" id="home">
        ...Home...
    </div>
    <div class="tab-pane fade" id="profile">
        ...Profile...
    </div>
    <div class="tab-pane fade" id="dropdown1">
        ...Dropdown1...
    </div>
    <div class="tab-pane fade" id="dropdown2">
        ...Dropdown2...
    </div>
</div>

<ul class="nav nav-tabs tabs-material">
    <li class="active"><a href="#tab1" data-toggle="tab">Tab 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Tab 2</a></li>
    <li><a href="#tab3" data-toggle="tab">Tab 3</a></li>
</ul>
<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade active in" id="tab1">
        ...Tab 1...
    </div>
    <div class="tab-pane fade" id="tab2">
        ...Tab 2...
    </div>
    <div class="tab-pane fade" id="tab3">
        ...Tab 3...
    </div>
</div>

Oh Yeah! SMTB is a great bootstrap color theme.

<div class="alert alert-dismissible alert-primary">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>
<div class="alert alert-dismissible alert-info">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>
<div class="alert alert-dismissible alert-success">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>
<div class="alert alert-dismissible alert-danger">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>
<div class="alert alert-dismissible alert-warning">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>

Oh Yeah! SMTB is a great bootstrap color theme.

<div class="alert alert-dismissible alert-dark alert-primary">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>
<div class="alert alert-dismissible alert-dark alert-info">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>
<div class="alert alert-dismissible alert-dark alert-success">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>
<div class="alert alert-dismissible alert-dark alert-danger">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>
<div class="alert alert-dismissible alert-dark alert-warning">
    <button type="button" class="close" data-dismiss="alert">×</button>
    <strong>Oh Yeah!</strong> <a href="#" class="alert-link">SMTB</a> is a great bootstrap color theme.
</div>

<div class="reveal-move">
    <img class="reveal-show" src="images/avatar/big/elliot.jpg">
    <img class="reveal-hide" src="images/avatar/big/jenny.jpg">
</div>

<div class="reveal-move-right">
    <img class="reveal-show" src="images/avatar/big/jenny.jpg">
    <img class="reveal-hide" src="images/avatar/big/elliot.jpg">
</div>

<div class="reveal-move-up">
    <img class="reveal-show" src="images/avatar/big/steve.jpg">
    <img class="reveal-hide" src="images/avatar/big/stevie.jpg">
</div>

<div class="reveal-move-down">
    <img class="reveal-show" src="images/avatar/big/stevie.jpg">
    <img class="reveal-hide" src="images/avatar/big/steve.jpg">
</div>

<div class="reveal-move-up reveal-no-leave">
    <img class="reveal-show" src="images/avatar/big/veronika.jpg">
    <img class="reveal-hide" src="images/avatar/big/steve.jpg">
</div>

<div class="reveal-rotate">
    <img class="reveal-show" src="images/avatar/big/elliot.jpg">
    <img class="reveal-hide" src="images/avatar/big/jenny.jpg">
</div>

<div class="reveal-rotate-right">
    <img class="reveal-show" src="images/avatar/big/jenny.jpg">
    <img class="reveal-hide" src="images/avatar/big/elliot.jpg">
</div>

<div class="reveal-fade">
    <img class="reveal-show" src="images/avatar/big/molly.png">
    <img class="reveal-hide" src="images/avatar/big/elyse.png">
</div>

Add Friend

<div class="reveal-dim">
    <img class="reveal-show" src="images/avatar/big/elyse.png">
    <div class="reveal-hide reveal-content">
        <div class="reveal-center">
            <span>
                <a class="btn btn-white-inverted-fill btn-warning">Add Friend</a>
            </span>
        </div>
    </div>
</div>
</div>

Add Friend

<div class="reveal-dim reveal-dim-white">
    <img class="reveal-show" src="images/avatar/big/veronika.jpg">
    <div class="reveal-hide reveal-content">
        <div class="reveal-center">
            <span>
                <a class="btn btn-inverted btn-bold btn-info">Add Friend</a>
            </span>
        </div>
    </div>
</div>

<div class="reveal-move reveal-circular">
    <img class="reveal-show" src="images/avatar/big/jenny.jpg">
    <img class="reveal-hide" src="images/avatar/big/elliot.jpg">
</div>

<div class="reveal-rotate reveal-circular">
    <img class="reveal-show" src="images/avatar/big/stevie.jpg">
    <img class="reveal-hide" src="images/avatar/big/steve.jpg">
</div>

<div class="reveal-fade reveal-circular">
    <img class="reveal-show" src="images/avatar/big/veronika.jpg">
    <img class="reveal-hide" src="images/avatar/big/helen.jpg">
</div>

<a class="btn btn-primary" onclick="$('#control-reveal-by-js').toggleClass('active')">{{lang.ToggleActive}}</a>
<div class="reveal-move reveal-no-hover" id="control-reveal-by-js">
    <img class="reveal-show" src="images/avatar/big/molly.png">
    <img class="reveal-hide" src="images/avatar/big/elyse.png">
</div>

Default Primary Success Warning Danger Info

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
<span class="label label-info">Info</span>

Stevie

<span class="label label-default label-image">
    <img src="images/avatar/small/stevie.jpg">
    Stevie
</span>

Jenny Developer

<a class="label label-danger label-image">
    <img src="images/avatar/small/jenny.jpg">
    Jenny
    <span class="label-detail">Developer</span>
</a>

elliot

<span class="label label-default label-image">
    <img src="images/avatar/small/elliot.jpg">
    elliot
    <a class="label-icon fa fa-times"></a>
</span>

jQuery Bootstrap Sematic UI PHP MySQL angularJS

<span class="label label-default label-tag">jQuery</span>
<span class="label label-info label-tag">Bootstrap</span>
<span class="label label-success label-tag">Sematic UI</span>
<span class="label label-primary label-tag">PHP</span>
<span class="label label-danger label-tag">MySQL</span>
<span class="label label-warning label-tag">angularJS</span>

Great

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla odio et lectus cursus, eleifend ullamcorper libero molestie. Phasellus eleifend ipsum vel leo lobortis, vel ullamcorper libero blandit. Nullam vitae dignissim sem, vel varius justo. Excellent Donec vel libero nec risus gravida luctus non eu nunc. Mauris ut urna lacus. Sed consequat, sem vel fringilla rutrum, lacus neque luctus urna, id lobortis erat orci ac nisl. GreatQuisque lectus tellus, tincidunt a turpis et, placerat feugiat orci. Nam posuere egestas lacus nec sagittis. Fusce sed blandit elit, non consequat neque. ExcellentAliquam erat volutpat. Aliquam ac quam consectetur, vulputate eros nec, egestas erat. Cras scelerisque nunc mollis mattis sodales.

<div class="well">
    <span class="label label-primary label-ribbon-left">Great</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla odio et lectus cursus, eleifend ullamcorper libero molestie. Phasellus eleifend ipsum vel leo lobortis, vel ullamcorper libero blandit. Nullam vitae dignissim sem, vel varius justo.
    <span class="label label-success label-ribbon-right">Excellent</span>
    Donec vel libero nec risus gravida luctus non eu nunc. Mauris ut urna lacus. Sed consequat, sem vel fringilla rutrum, lacus neque luctus urna, id lobortis erat orci ac nisl.
    <span class="label label-warning label-ribbon-left">Great</span>Quisque lectus tellus, tincidunt a turpis et, placerat feugiat orci. Nam posuere egestas lacus nec sagittis. Fusce sed blandit elit, non consequat neque.
    <span class="label label-info label-ribbon-right">Excellent</span>Aliquam erat volutpat. Aliquam ac quam consectetur, vulputate eros nec, egestas erat. Cras scelerisque nunc mollis mattis sodales.</p>
</div>

Great

View Detail

Excellent

<div class="card">
    <div class="card-image">
        <span class="label label-danger label-ribbon-left">Great</span>
        <div class="reveal-dim">
            <div class="reveal-hide reveal-content">
                <div class="reveal-center">
                    <span><a class="btn btn-info">View Detail</a></span>
                </div>
            </div>
            <img src="images/avatar/big/matthew.png">
        </div>
    </div>
</div>

<div class="card">
    <div class="card-image">
        <span class="label label-warning label-ribbon-right">Excellent</span>
        <img src="images/avatar/big/elyse.png">
    </div>
</div>

Great

<div class="well">
    <span class="label label-default label-attached-top">Great</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla odio et lectus cursus, eleifend ullamcorper libero molestie. Phasellus eleifend ipsum vel leo lobortis, vel ullamcorper libero blandit. Nullam vitae dignissim sem, vel varius justo.</p>
</div>

Great

<div class="well">
    <span class="label label-default label-attached-bottom">Great</span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla odio et lectus cursus, eleifend ullamcorper libero molestie. Phasellus eleifend ipsum vel leo lobortis, vel ullamcorper libero blandit. Nullam vitae dignissim sem, vel varius justo.</p>
</div>

Top-left Top-right Bottom-left Bottom-right

<div class="well">
    <span class="label label-default label-attached-top-left">Top-left</span>
    <span class="label label-default label-attached-top-right">Top-right</span>
    <span class="label label-default label-attached-bottom-left">Bottom-left</span>
    <span class="label label-default label-attached-bottom-right">Bottom-right</span>
    <p style="padding-top:10px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus fringilla odio et lectus cursus, eleifend ullamcorper libero molestie. Phasellus eleifend ipsum vel leo lobortis, vel ullamcorper libero blandit. Nullam vitae dignissim sem, vel varius justo.</p>
</div>

Elliot Fu

Joined at 2013

Elliot is a great game player.

22 Friends

14h

Steve

17 likes 3 comments

Elliot Fu

Famous Singer

How do you think about the performance of Elliot on today's show?

Great Good Bad

<div class="row">
    <div class="col-sm-4">
        <div class="bs-component">
            <div class="card">
                <div class="card-image">
                    <img src="images/avatar/big/elliot.jpg">
                </div>
                <div class="card-content">
                    <a class="card-header">Elliot Fu</a>
                    <div class="card-meta">Joined at 2013</div>
                    <div class="card-description">Elliot is a great game player.</div>
                </div>
                <div class="card-extra card-content">
                    <a><i class="fa fa-user"></i> 22 Friends </a>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="bs-component">
            <div class="card">
                <div class="card-content">
                    <div class="pull-right">14h</div><img class="card-avatar card-image" src="images/avatar/big/steve.jpg"> Steve</div>
                <div class="card-image">
                    <img src="images/image.png">
                </div>
                <div class="card-content">
                    <span class="pull-right"><i class="fa fa-heart"></i> 17 likes </span>
                    <i class="fa fa-comment"></i> 3 comments
                </div>
                <div class="card-extra card-content">
                    <div class="input-group">
                        <input class="form-control" type="text" placeholder="Add comment...">
                        <div class="input-group-btn">
                            <a class="btn btn-inverted btn-default"><i class="fa fa-paper-plane"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="bs-component">
            <div class="card">
                <div class="card-content">
                    <img class="pull-right card-image card-avatar" src="images/avatar/big/elliot.jpg">
                    <div class="card-header">Elliot Fu </div>
                    <div class="card-meta">Famous Singer</div>
                    <div class="card-description">How do you think about the performance of Elliot on today's show?</div>
                </div>
                <div class="card-extra card-content">
                    <div class="row-fluid card-btn">
                        <a class="col-xs-4 btn btn-inverted btn-primary">Great</a>
                        <a class="col-xs-4 btn btn-inverted btn-success">Good</a>
                        <a class="col-xs-4 btn btn-inverted btn-danger">Bad</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Matt Giampietro

Cofounder

Matthew is an interior designer living in New York.

Joined at 2013 75 Friends

<div class="card card-link">
    <div class="card-image">
        <img src="images/avatar/big/matthew.png">
    </div>
    <div class="card-content">
        <div class="card-header">Matt Giampietro</div>
        <div class="card-meta">Cofounder</div>
        <div class="card-description">Matthew is an interior designer living in New York. </div>
    </div>
    <div class="card-extra card-content">
        <span class="pull-right">Joined at 2013</span>
        <span><i class="fa fa-user"></i> 75 Friends</span>
    </div>
</div>

Team Fu & Hess

Formed at 2014

2 Members

Add Friend

Elliot

Joined at 2014

2 Friends

Add Friend

Elliot

Joined at 2014

2 Friends

<div class="card">
    <div class="card-image reveal-rotate">
        <img class="reveal-show" src="images/avatar/big/jenny.jpg">
        <img class="reveal-hide" src="images/avatar/big/elliot.jpg">
    </div>
    <div class="card-content">
        <a class="card-header">Team Fu & Hess</a>
        <div class="card-meta">Formed at 2014</div>
    </div>
    <div class="card-extra card-content">
        <a><i class="fa fa-users"></i> 2 Members </a>
    </div>
</div>

<div class="card">
    <div class="card-image reveal-dim">
        <div class="reveal-hide reveal-content">
            <div class="reveal-center">
                <span>
              <a class="btn btn-inverted btn-bold btn-primary">Add Friend</a>
            </span>
            </div>
        </div>
        <img class="reveal-show" src="images/avatar/big/elliot.jpg">
    </div>
    <div class="card-content">
        <a class="card-header">Elliot</a>
        <div class="card-meta">Joined at 2014</div>
    </div>
    <div class="card-extra card-content">
        <a><i class="fa fa-users"></i> 2 Friends </a>
    </div>
</div>

<div class="card">
    <div class="card-image reveal-dim reveal-dim-white">
        <div class="reveal-hide reveal-content">
            <div class="reveal-center">
                <span>
              <a class="btn btn-info">Add Friend</a>
            </span>
            </div>
        </div>
        <img class="reveal-show" src="images/avatar/big/elliot.jpg">
    </div>
    <div class="card-content">
        <a class="card-header">Elliot</a>
        <div class="card-meta">Joined at 2014</div>
    </div>
    <div class="card-extra card-content">
        <a><i class="fa fa-users"></i> 2 Friends </a>
    </div>
</div>

Radio

Semantic UI

Bootstrap

SMTB

Foundation

<div class="radio-s">
    <input id="r1-1" type="radio" name="r1" value="1">
    <label for="r1-1">Semantic UI</label>
</div>
<div class="radio-s">
    <input id="r1-2" type="radio" name="r1" value="2">
    <label for="r1-2">Bootstrap</label>
</div>
<div class="radio-s">
    <input id="r1-3" type="radio" name="r1" value="3" checked>
    <label for="r1-3">SMTB</label>
</div>
<div class="radio-s disabled">
    <input id="r1-4" type="radio" name="r1" value="4" disabled>
    <label for="r1-4">Foundation</label>
</div>

Checkbox

Semantic UI

Bootstrap

SMTB

Foundation

Intermedia

<div class="checkbox-s">
    <input id="c1-1" type="checkbox" name="c1[]" value="1">
    <label for="c1-1">Semantic UI</label>
</div>
<div class="checkbox-s">
    <input id="c1-2" type="checkbox" name="c1[]" value="2">
    <label for="c1-2">Bootstrap</label>
</div>
<div class="checkbox-s">
    <input id="c1-3" type="checkbox" name="c1[]" value="3" checked>
    <label for="c1-3">SMTB</label>
</div>
<div class="checkbox-s">
    <input id="c1-4" type="checkbox" name="c1" value="4" disabled>
    <label for="c1-4">Foundation</label>
</div>
<div class="checkbox-s">
    <input id="c1-5" type="checkbox" name="c1" value="5">
    <<label for="c1-5">Intermedia</label>
</div>

<script>$('#c1-5').prop('indeterminate',true);</script>

Radio Group

<div class="btn-group radio-group">
    <input id="gr1-1" type="radio" name="gr1" value="1">
    <label for="gr1-1" class="btn">Great</label>
    <input id="gr1-2" type="radio" name="gr1" value="2">
    <label for="gr1-2" class="btn">General</label>
    <input id="gr1-3" type="radio" name="gr1" value="3">
    <label for="gr1-3" class="btn">Bad</label>
</div>
<div class="btn-group radio-group radio-group-danger">
    <input id="gr2-1" type="radio" name="gr2" value="1">
    <label for="gr2-1" class="btn">Great</label>
    <input id="gr2-2" type="radio" name="gr2" value="2">
    <label for="gr2-2" class="btn">General</label>
    <input id="gr2-3" type="radio" name="gr2" value="3">
    <label for="gr2-3" class="btn">Bad</label>
</div>
<div class="btn-group radio-group radio-group-warning">
    <input id="gr3-1" type="radio" name="gr3" value="1">
    <label for="gr3-1" class="btn">Great</label>
    <input id="gr3-2" type="radio" name="gr3" value="2">
    <label for="gr3-2" class="btn">General</label>
    <input id="gr3-3" type="radio" name="gr3" value="3">
    <label for="gr3-3" class="btn">Bad</label>
</div>
<div class="btn-group radio-group radio-group-success">
    <input id="gr4-1" type="radio" name="gr4" value="1">
    <label for="gr4-1" class="btn">Great</label>
    <input id="gr4-2" type="radio" name="gr4" value="2">
    <label for="gr4-2" class="btn">General</label>
    <input id="gr4-3" type="radio" name="gr4" value="3">
    <label for="gr4-3" class="btn">Bad</label>
</div>
<div class="btn-group radio-group radio-group-info">
    <input id="gr5-1" type="radio" name="gr5" value="1">
    <label for="gr5-1" class="btn">Great</label>
    <input id="gr5-2" type="radio" name="gr5" value="2">
    <label for="gr5-2" class="btn">General</label>
    <input id="gr5-3" type="radio" name="gr5" value="3">
    <label for="gr5-3" class="btn">Bad</label>
</div>

Checkbox Group

<div class="btn-group checkbox-group">
    <input id="gc1-1" type="checkbox" name="gc1[]" value="1">
    <label for="gc1-1" class="btn">PHP</label>
    <input id="gc1-2" type="checkbox" name="gc1[]" value="2">
    <label for="gc1-2" class="btn">ROR</label>
    <input id="gc1-3" type="checkbox" name="gc1[]" value="3">
    <label for="gc1-3" class="btn">Node.js</label>
</div>
<div class="btn-group checkbox-group checkbox-group-danger">
    <input id="gc2-1" type="checkbox" name="gc2[]" value="1">
    <label for="gc2-1" class="btn">PHP</label>
    <input id="gc2-2" type="checkbox" name="gc2[]" value="2">
    <label for="gc2-2" class="btn">ROR</label>
    <input id="gc2-3" type="checkbox" name="gc2[]" value="3">
    <label for="gc2-3" class="btn">Node.js</label>
</div>
<div class="btn-group checkbox-group checkbox-group-warning">
    <input id="gc3-1" type="checkbox" name="gc3[]" value="1">
    <label for="gc3-1" class="btn">PHP</label>
    <input id="gc3-2" type="checkbox" name="gc3[]" value="2">
    <label for="gc3-2" class="btn">ROR</label>
    <input id="gc3-3" type="checkbox" name="gc3[]" value="3">
    <label for="gc3-3" class="btn">Node.js</label>
</div>
<div class="btn-group checkbox-group checkbox-group-success">
    <input id="gc4-1" type="checkbox" name="gc4[]" value="1">
    <label for="gc4-1" class="btn">PHP</label>
    <input id="gc4-2" type="checkbox" name="gc4[]" value="2">
    <label for="gc4-2" class="btn">ROR</label>
    <input id="gc4-3" type="checkbox" name="gc4[]" value="3">
    <label for="gc4-3" class="btn">Node.js</label>
</div>
<div class="btn-group checkbox-group checkbox-group-info">
    <input id="gc5-1" type="checkbox" name="gc5[]" value="1">
    <label for="gc5-1" class="btn">PHP</label>
    <input id="gc5-2" type="checkbox" name="gc5[]" value="2">
    <label for="gc5-2" class="btn">ROR</label>
    <input id="gc5-3" type="checkbox" name="gc5[]" value="3">
    <label for="gc5-3" class="btn">Node.js</label>
</div>

I agree the terms and conditions

<div class="switch">
    <input id="s1" type="checkbox" name="s1" value="1">
    <label for="s1">I agree the terms and conditions</label>
</div>

Subscribe to the mainling list

<div class="switch switch-line">
    <input id="s2" type="checkbox" name="s2" value="1">
    <label for="s2">Subscribe to the mainling list</label>
</div>

anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

                            <div class="bs-divider">{{lang.Or}}</div>

                            <div class="bs-divider"><i class="fa fa-star"></i> {{lang.dividerAsHeading}}</div>

Great General Bad

Allow Disable

<div class="btn-group btn-divided">
    <a href="#" class="btn btn-lg btn-primary">Great<i data-text="or"></i></a>
    <a href="#" class="btn btn-lg btn-info">General<i data-text="or"></i></a>
    <a href="#" class="btn btn-lg btn-warning">Bad</a>
</div>
<div class="btn-group btn-divided">
    <a href="#" class="btn btn-success">Allow<i data-text="或"></i></a>
    <a href="#" class="btn btn-danger">Disable</a>
</div>

                            $('.sidebar-overlay').on('click touchstart',function() {
    $('.sidebar,.sidebar-container').removeClass('active'); $('body').removeClass('sidebar-active');
});

HTML markup

<body>
    <div class="sidebar sidebar-right">
        <div class="sidebar-wrap">
          <div class="sidebar-subject">.....Your Subject.....</div>
          <ul>
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 1</a>
              <ul class="dropdown-menu">
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
              </ul>
            </li>
            <li>
              <a href="#">Menu 2</a>
              <ul>
                <li><a href="#">Submenu 1</a></li>
                <li><a href="#">Submenu 2</a></li>
                <li><a href="#">Submenu 3</a></li>
              </ul>
            </li>
          </ul>
        </div>
    </div>
    <div class="sidebar-overlay"></div>
    .....Your content.....
</body>

Body Left Sidebar

<a class="btn btn-default btn-inverted" onclick="$('body').toggleClass('sidebar-active').find('#body-sidebar-left').toggleClass('active');"><i class="fa fa-bars"></i> Body Left Sidebar</a>

<body>
    <div id="body-sidebar-left" class="sidebar">
      <div class="sidebar-wrap">
        <div class="sidebar-subject"><img src="images/logo.png" height="38"> Semantic UI Bootstrap</div>
        <ul>
          <li><a href="#">Menu 1</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2</a>
            <ul class="dropdown-menu">
              <li><a href="#">Submenu 1</a></li>
              <li><a href="#">Submenu 2</a></li>
              <li><a href="#">Submenu 3</a></li>
            </ul>
          </li>
          <li><a href="#">Menu 3</a></li>
          <li><a href="#">Menu 4</a></li>
          <li><a href="#">Menu 5</a></li>
        </ul>
      </div>
    </div>
    <div class="sidebar-overlay"></div>
</body>

Body Right Sidebar

<a class="btn btn-default btn-inverted" onclick="$('body').addClass('sidebar-active').find('#body-sidebar-right').toggleClass('active');">Body Right Sidebar <i class="fa fa-bars"></i></a>

<body>
    <div id="body-sidebar-right" class="sidebar sidebar-right">
    <div class="sidebar-wrap">
      <div class="sidebar-subject"><img src="images/logo.png" height="38"> Semantic UI Bootstrap</div>
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li>
          <a href="#">Menu 2</a>
          <ul>
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
      </ul>
    </div>
    </div>
    <div class="sidebar-overlay"></div>
</body>

HTML markup

<div class="sidebar-container">
  <div class="sidebar sidebar-right">
    <div class="sidebar-wrap">
      <div class="sidebar-subject">Your Subject</div>
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
  <div class="sidebar-overlay"></div>
  <div class="sidebar-dim">.....Your Content.....</div>
</div>

Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<p>
  <a class="btn btn-default btn-inverted" onclick="$('#sidebar-left').toggleClass('active')"><i class="fa fa-bars"></i></a>
</p>
<div id="sidebar-left" class="sidebar-container" style="border:1px solid #DDD;">
  <div class="sidebar">
    <div class="sidebar-wrap">
      <div class="sidebar-subject"><img src="images/logo.png" height="38"> Semantic UI Bootstrap</div>
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
      </ul>
    </div>
  </div>
  <div class="sidebar-overlay"></div>
  <div class="sidebar-dim">.....Content.....</div>
</div>

<p>
  <a class="btn btn-default btn-inverted" onclick="$('#sidebar-right').toggleClass('active')"><i class="fa fa-bars"></i></a>
</p>
<div id="sidebar-right" class="sidebar-container sidebar-push" style="border:1px solid #DDD;">
  <div class="sidebar sidebar-right">
    <div class="sidebar-wrap">
      <div class="sidebar-subject"><img src="images/logo.png" height="38"> Semantic UI Bootstrap</div>
      <ul>
        <li><a href="#">Menu 1</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu 2</a>
          <ul class="dropdown-menu">
            <li><a href="#">Submenu 1</a></li>
            <li><a href="#">Submenu 2</a></li>
            <li><a href="#">Submenu 3</a></li>
          </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
        <li><a href="#">Menu 5</a></li>
      </ul>
    </div>
  </div>
  <div class="sidebar-overlay"></div>
  <div class="sidebar-dim">.....Content.....</div>
</div>

@color-primary	Default: #3ac0ff
@color-info	Default: #8a73ff
@color-success	Default: #22be34
@color-danger	Default: #d01919
@color-warning	Default: #ff851b

@alert-color-primary	Default: #F8FFFF, #A9D5DE, #276f86
@alert-color-info	Default: #F1EFFF, #CBC4FC, #6435C9
@alert-color-success	Default: #FCFFF5, #A3C293, #2c662d
@alert-color-danger	Default: #FFF6F6, #E0B4B4, #9F3A38
@alert-color-warning	Default: #FFFAF3, #C9BA9B, #573a08

@sidebarWidth	Default: 250px

{{lang.componentNdocs}}

{{lang.Button}}

{{lang.DefaultButton}}

{{lang.Withicon}}

{{lang.Inverted}}

{{lang.Circular}}

{{lang.ButtonGroupDropdown}}

{{lang.Dropdown}}

{{lang.DefaultDropdown}}

{{lang.ShowOnMouseover}}

{{lang.Submenu}}

{{lang.Tabs}}

{{lang.DefaultTabs}}

{{lang.MaterialTabs}}

{{lang.Alert}}

{{lang.DefaultAlert}}

{{lang.Reveal}}

{{lang.Move}}

{{lang.Rotate}}

{{lang.Fade}}

{{lang.DimBlur}}

{{lang.Circularblock}}

{{lang.DisableEffectOnMouseover}}

{{lang.Label}}

{{lang.DefaultLabel}}

{{lang.UserLabel}}

{{lang.TagLabel}}

{{lang.Ribbon}}

{{lang.Attached}}

{{lang.Card}}

{{lang.CardLink}}

{{lang.CardReveal}}

{{lang.RevealRotate}}

{{lang.RevealDim}}

{{lang.RevealDimWhite}}

{{lang.Checkbox}}

Radio

Checkbox

Radio Group

Checkbox Group

{{lang.switch}}

{{lang.Divider}}

{{lang.HorizontalDivider}}

{{lang.ButtonDivider}}

{{lang.Sidebar}}

{{lang.BodySidebar}}

HTML markup

{{lang.InnerSidebar}}

HTML markup

{{lang.InnerSidebarLeft}}

{{lang.InnerSidebarRight}}

{{lang.UsingLess}}

{{lang.BrandColor}}

{{lang.AlertColor}}

{{lang.sidebarWidth}}