Component Page

<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="crt-icon crt-icon-location-arrow"></span>Large Button</button><button class="btn btn-primary">    <span class="crt-icon crt-icon-location-arrow"></span>Normal Button</button><button class="btn btn-primary btn-sm">    <span class="crt-icon crt-icon-location-arrow"></span>Small Button</button>

<button class="btn btn-icon btn-light">    <span class="crt-icon crt-icon-side-bar-icon"></span></button><button class="btn btn-icon btn-light btn-shade">    <span class="crt-icon crt-icon-side-bar-icon"></span></button><button class="btn btn-icon btn-primary">    <span class="crt-icon crt-icon-side-bar-icon"></span></button><button class="btn btn-icon btn-primary btn-shade">    <span class="crt-icon crt-icon-side-bar-icon"></span></button><button class="btn btn-icon btn-default">    <span class="crt-icon crt-icon-side-bar-icon"></span></button><button class="btn btn-icon btn-default btn-shade">    <span class="crt-icon crt-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>