<hr>
<hr class="dotted">
<hr class="dashed">
<hr class="brd-primary">
<hr class="dotted brd-primary">
<hr class="dashed brd-primary">

<div class="alert alert-success" role="alert">
    <strong>Heads up!</strong> You successfully ...
</div>

<div class="alert alert-info" role="alert">
    <strong>Well done!</strong> This alert ...
</div>

<div class="alert alert-warning" role="alert">
    <strong>Warning!</strong> Better check ...
</div>

<div class="alert alert-danger" role="alert">
    <strong>Oh snap!</strong> Change a few ...
</div>

<!-- Use the button classes on an <a>, <button>, or <input> element -->
<a class="btn btn-primary" href="#" role="button">Link</a>
<button class="btn btn-primary" type="submit">Button</button>
<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">

<!-- Use <div>, <p> or <span> wrapper with the .btn-group class if you have more than one button -->
<div class="btn-group">
    <button class="btn btn-primary">Button</button>
    <button class="btn btn-primary">Button</button>
    ...
</div>

<!-- Use .btn-lg or .btn-sm classes for larger or smaller buttons. -->
<button class="btn btn-primary btn-lg">Large Button</button>
<button class="btn btn-primary">Normal Button</button>
<button class="btn btn-primary btn-sm">Small Button</button>

<!-- Use .btn-block class to create button that span the full width of a parent -->
<button class="btn btn-primary btn-block">Large Button</button>

<!-- Use .btn-default .btn-primary or .btn-light classes for button coloring -->
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-light">Light</button>

<!-- Use .btn-thin class for button light text -->
<button class="btn btn-thin btn-default">Default</button>
<button class="btn btn-thin btn-primary">Primary</button>

<!-- Use .btn-upper class for transforming button text -->
<button class="btn btn-upper btn-default">Default</button>
<button class="btn btn-upper btn-primary">Primary</button>

<button class="btn btn-upper btn-thin btn-default">Default</button>
<button class="btn btn-upper btn-thin btn-primary">Primary</button>

<!-- Add the "disabled" attribute to buttons -->
<button class="btn btn-default" disabled="disabled">Disabled</button>
<button class="btn btn-primary" disabled="disabled">Disabled</button>

<!-- Add .disabled class for just styling -->
<a class="btn btn-default disabled" href="#" role="button">Disabled</a>

<button class="btn btn-primary btn-lg">
    <span class="ace-icon ace-icon-location-arrow"></span>Large Button
</button>

<button class="btn btn-primary">
    <span class="ace-icon ace-icon-location-arrow"></span>Normal Button
</button>

<button class="btn btn-primary btn-sm">
    <span class="ace-icon ace-icon-location-arrow"></span>Small Button
</button>

<button class="btn btn-icon btn-light">
    <span class="ace-icon ace-icon-side-bar-icon"></span>
</button>
<button class="btn btn-icon btn-light btn-shade">
    <span class="ace-icon ace-icon-side-bar-icon"></span>
</button>

<button class="btn btn-icon btn-primary">
    <span class="ace-icon ace-icon-side-bar-icon"></span>
</button>
<button class="btn btn-icon btn-primary btn-shade">
    <span class="ace-icon ace-icon-side-bar-icon"></span>
</button>

<button class="btn btn-icon btn-default">
    <span class="ace-icon ace-icon-side-bar-icon"></span>
</button>
<button class="btn btn-icon btn-default btn-shade">
    <span class="ace-icon ace-icon-side-bar-icon"></span>
</button>

<!-- Chart -->
<div class="progress-chart" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <div class="progress-bar" data-text="90%" data-value="0.9"></div>
    <strong class="progress-title">UX Design</strong>
</div>

<!-- Bullet Progress Bar -->
<div class="progress-bullets" role="progressbar" aria-valuenow="7" aria-valuemin="0" aria-valuemax="10">
    <strong class="progress-title">Italian</strong>
    <span class="progress-bar">
        <span class="bullet fill"></span>
        <span class="bullet fill"></span>
        <span class="bullet fill"></span>
        <span class="bullet fill"></span>
        <span class="bullet fill"></span>
        <span class="bullet fill"></span>
        <span class="bullet fill"></span>
        <span class="bullet"></span>
        <span class="bullet"></span>
        <span class="bullet"></span>
    </span>
    <span class="progress-text text-muted">begginer</span>
</div>

<!-- Line Progress Bar -->
<div class="progress-line" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
    <strong class="progress-title">Php & MySQL</strong>
    <div class="progress-bar" data-text="90%" data-value="0.9"></div>
</div>

<!-- Horizontal Tabs -->
<div class="tabs tabs-horizontal">
    <ul class="tabs-menu">
        <li class="active"><a href="#tab-hrz-1">Tab 1</a></li>
        <li><a href="#tab-hrz-2">Tab 2</a></li>
        <li><a href="#tab-hrz-3">Tab 3</a></li>
        <li><a href="#tab-hrz-4">Tab 4</a></li>
    </ul>

    <div class="tabs-content">
        <div id="tab-hrz-1" class="tab-content">Tab 1 content...</div>

        <div id="tab-hrz-2" class="tab-content">Tab 2 content...</div>

        <div id="tab-hrz-3" class="tab-content">Tab 3 content...</div>

        <div id="tab-hrz-4" class="tab-content">Tab 4 content...</div>
    </div>
</div>

<!-- Vertical Tabs -->

<ul class="togglebox">
    <li>
        <h3 class="togglebox-header">Toggle Box Title 1</h3>
        <div class="togglebox-content">Lorem ipsum dolor ... </div>
    </li>

    <li>
        <h3 class="togglebox-header">Toggle Box Title 2</h3>
        <div class="togglebox-content">Lorem ipsum dolor ... </div>
    </li>

    <li>
        <h3 class="togglebox-header">Toggle Box Title 3</h3>
        <div class="togglebox-content">Lorem ipsum dolor ... </div>
    </li>
</ul>

<!-- Use .active class if you want to pre open one of toggle items -->
<ul class="togglebox">
    <li class="active">
        <h3 class="togglebox-header">Toggle Box Title 1</h3>
        <div class="togglebox-content">Lorem ipsum dolor ... </div>
    </li>

    <li>
        <h3 class="togglebox-header">Toggle Box Title 2</h3>
        <div class="togglebox-content">Lorem ipsum dolor ... </div>
    </li>

    ...
</ul>