Component Page

Line types

Show Code Example 

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

Alerts

Show Code Example 

<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>

Buttons

Link

Show Code Example 

<!-- 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>

Sizes

Show Code Example 

<!-- 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>

Show Code Example 

<!-- 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>

Colors

Show Code Example 

<!-- 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>

Thin

Show Code Example 

<!-- 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>

Uppercase

Show Code Example 

<!-- 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>

Disabled

Show Code Example 

<!-- 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>

With Icons

Show Code Example 

<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>

Circle Buttons



Show Code Example 

<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>

Progress Bars

UX Design
Italianbegginer
Php & MySQL

Show Code Example 

<!-- 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>

Tabs

Tab 1 content !
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
Tab 2 content !
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
Tab 3 content !
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
Tab 4 content !
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.

Show Code Example 

<!-- 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>
Tab 1 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
Tab 2 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
Tab 3 content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.

Show Code Example 

<!-- Vertical Tabs -->

Toggle

  • Toggle Box Title 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.

  • Toggle Box Title 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.

  • Toggle Box Title 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.

Show Code Example 

<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>

  • Accordion Section 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.

  • Accordion Section 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.

  • Accordion Section 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.
Toggle Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet purus urna. Proin dictum fringilla enim, sit amet suscipit dolor dictum in. Maecenas porttitor, est et malesuada congue, ligula elit fermentum massa, sit amet porta odio est at velit. Sed nec turpis neque. Fusce at mi felis, sed interdum tortor.

Form Elements

Slider

Carousel