| Server IP : 52.223.31.75 / Your IP : 172.31.32.98 [ Web Server : Apache/2.4.66 () OpenSSL/1.0.2k-fips PHP/7.4.33 System : Linux ip-172-31-14-81.eu-central-1.compute.internal 4.14.281-212.502.amzn2.x86_64 #1 SMP Thu May 26 09:52:17 UTC 2022 x86_64 User : apache ( 48) PHP Version : 7.4.33 Disable Function : NONE Domains : 4 Domains MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : OFF Directory : /var/www/ripara.co/admin/views/ |
Upload File : |
<div class="container">
<div class="block-header">
<h2>Buttons</h2>
<ul class="actions">
<li>
<a href="">
<i class="zmdi zmdi-trending-up"></i>
</a>
</li>
<li>
<a href="">
<i class="zmdi zmdi-check-all"></i>
</a>
</li>
<li class="dropdown" uib-dropdown>
<a href="" uib-dropdown-toggle>
<i class="zmdi zmdi-more-vert"></i>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li>
<a href="">Refresh</a>
</li>
<li>
<a href="">Manage Widgets</a>
</li>
<li>
<a href="">Widgets Settings</a>
</li>
</ul>
</li>
</ul>
</div>
<div class="card">
<div class="card-header">
<h2>Basic Examples <small>Use any of the available button classes to quickly create a styled button.</small></h2>
</div>
<div class="card-body card-padding">
<p class="f-500 c-black m-b-20">Bootstrap Color Schemes</p>
<div class="btn-demo">
<button class="btn btn-default">Default</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
</div>
<br/>
<br/>
<p class="f-500 c-black m-b-20">Optional Material Design Colors</p>
<div class="btn-colors btn-demo"> <!-- Optional container for demo porpose only -->
<button class="btn bgm-cyan">Cyan</button>
<button class="btn bgm-teal">Teal</button>
<button class="btn bgm-amber">Amber</button>
<button class="btn bgm-orange">Orange</button>
<button class="btn bgm-deeporange">Deep Orange</button>
<button class="btn bgm-red">Red</button>
<button class="btn bgm-pink">Pink</button>
<button class="btn bgm-lightblue">Light Blue</button>
<button class="btn bgm-blue">Blue</button>
<button class="btn bgm-indigo">Indigo</button>
<button class="btn bgm-lime">Lime</button>
<button class="btn bgm-lightgreen">Light Green</button>
<button class="btn bgm-green">Green</button>
<button class="btn bgm-purple">Purple</button>
<button class="btn bgm-deeppurple">Deep Purple</button>
<button class="btn bgm-gray">Gray</button>
<button class="btn bgm-bluegray">Blue Gray</button>
<button class="btn bgm-black">Black</button>
</div>
<br/>
<br/>
<p class="f-500 c-black m-b-5">Button Sizes</p>
<small>Fancy larger or smaller buttons? Add the button sizing classes.</small>
<br/>
<br/>
<div class="btn-demo">
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-xs">Extra Small</button>
</div>
<br/>
<br/>
<p class="f-500 c-black m-b-20">Disable Stat</p>
<div class="btn-demo">
<button class="btn btn-default" disabled="disabled">Default</button>
<button class="btn btn-info" disabled="disabled">Info</button>
<button class="btn btn-primary" disabled="disabled">Primary</button>
<button class="btn btn-success" disabled="disabled">Success</button>
<button class="btn btn-warning" disabled="disabled">Warning</button>
<button class="btn btn-danger" disabled="disabled">Danger</button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2>Button Icons <small>You can refer the Icons page for the complete list of Font Icons which are inspired by Material Design</small></h2>
</div>
<div class="card-body card-padding">
<div class="btn-demo">
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-home"></i> Home</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-search"></i> Search</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-more-vert"></i> More</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-arrow-forward"></i> Forward</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-arrow-back"></i> Back</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-refresh"></i> Sync</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-check"></i> Check</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-close"></i> Check</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-menu"></i> Menu</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-apps"></i> Apps</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-check-all"></i> Done</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-trending-up"></i> Up</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-apps"></i> Get</button>
<button class="btn btn-default btn-icon-text"><i class="zmdi zmdi-phone"></i> Call</button>
<br/>
<br/>
<br/>
<button class="btn btn-default"><i class="zmdi zmdi-home"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-search"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-more-vert"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-arrow-forward"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-arrow-back"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-refresh"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-check"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-close"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-menu"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-apps"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-check-all"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-trending-up"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-apps"></i></button>
<button class="btn btn-default"><i class="zmdi zmdi-phone"></i></button>
<br/>
<br/>
<button class="btn btn-primary"><i class="zmdi zmdi-home"></i></button>
<button class="btn btn-info"><i class="zmdi zmdi-search"></i></button>
<button class="btn btn-success"><i class="zmdi zmdi-more-vert"></i></button>
<button class="btn btn-warning"><i class="zmdi zmdi-arrow-forward"></i></button>
<button class="btn btn-danger"><i class="zmdi zmdi-arrow-back"></i></button>
<button class="btn bgm-teal"><i class="zmdi zmdi-refresh"></i></button>
<button class="btn bgm-orange"><i class="zmdi zmdi-check"></i></button>
<button class="btn bgm-cyan"><i class="zmdi zmdi-close"></i></button>
<button class="btn bgm-lightgreen"><i class="zmdi zmdi-menu"></i></button>
<button class="btn bgm-lime"><i class="zmdi zmdi-apps"></i></button>
<button class="btn bgm-amber"><i class="zmdi zmdi-check-all"></i></button>
<button class="btn bgm-gray"><i class="zmdi zmdi-trending-up"></i></button>
<button class="btn bgm-lightblue"><i class="zmdi zmdi-apps"></i></button>
<button class="btn bgm-deeporange"><i class="zmdi zmdi-phone"></i></button>
<br/>
<br/>
<br/>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-home"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-search"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-more-vert"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-arrow-forward"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-arrow-back"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-refresh"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-check"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-close"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-menu"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-apps"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-check-all"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-trending-up"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-apps"></i></button>
<button class="btn btn-default btn-icon"><i class="zmdi zmdi-phone"></i></button>
<br/>
<br/>
<button class="btn btn-primary btn-icon"><i class="zmdi zmdi-home"></i></button>
<button class="btn btn-info btn-icon"><i class="zmdi zmdi-search"></i></button>
<button class="btn btn-success btn-icon"><i class="zmdi zmdi-more-vert"></i></button>
<button class="btn btn-warning btn-icon"><i class="zmdi zmdi-arrow-forward"></i></button>
<button class="btn btn-danger btn-icon"><i class="zmdi zmdi-arrow-back"></i></button>
<button class="btn bgm-teal btn-icon"><i class="zmdi zmdi-refresh"></i></button>
<button class="btn bgm-orange btn-icon"><i class="zmdi zmdi-check"></i></button>
<button class="btn bgm-cyan btn-icon"><i class="zmdi zmdi-close"></i></button>
<button class="btn bgm-lightgreen btn-icon"><i class="zmdi zmdi-menu"></i></button>
<button class="btn bgm-lime btn-icon"><i class="zmdi zmdi-apps"></i></button>
<button class="btn bgm-amber btn-icon"><i class="zmdi zmdi-check-all"></i></button>
<button class="btn bgm-gray btn-icon"><i class="zmdi zmdi-trending-up"></i></button>
<button class="btn bgm-lightblue btn-icon"><i class="zmdi zmdi-apps"></i></button>
<button class="btn bgm-deeporange btn-icon"><i class="zmdi zmdi-phone"></i></button>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2>Block Level Buttons <small>Create block level buttons - those that span the full width of a parent - by adding .btn-block.</small></h2>
</div>
<div class="card-padding card-body">
<button class="btn btn-default btn-block">Default</button>
<br/>
<br/>
<button class="btn btn-primary btn-block">Primary</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h2>Button Groups <small>Group a series of buttons together on a single line with the button group</small></h2>
</div>
<div class="card-body card-padding">
<p class="f-500 c-black m-b-20">Basic Example</p>
<div class="btn-group-demo">
<div class="btn-group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-info">Left</button>
<button type="button" class="btn btn-info">Middle</button>
<button type="button" class="btn btn-info">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-success">Left</button>
<button type="button" class="btn btn-success">Middle</button>
<button type="button" class="btn btn-success">Right</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-warning">Left</button>
<button type="button" class="btn btn-warning">Middle</button>
<button type="button" class="btn btn-warning">Right</button>
</div>
</div>
<br/>
<br/>
<p class="f-500 c-black m-b-5">Button Toolbars</p>
<small>Combine sets of '.btn-group.' into a '.btn-toolbar' for more complex components.</small>
<br/>
<br/>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">4</button>
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">7</button>
<button type="button" class="btn btn-default">8</button>
<button type="button" class="btn btn-default">9</button>
</div>
</div>
<br/>
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">4</button>
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">7</button>
<button type="button" class="btn btn-primary">8</button>
<button type="button" class="btn btn-primary">9</button>
</div>
</div>
<br/>
<br/>
<br/>
<p class="f-500 c-black m-b-5">Button Group Sizing</p>
<small>Instead of applying button sizing classes to every button in a group, just add '.btn-group-*' to each '.btn-group', including when nesting multiple groups.</small>
<br/>
<br/>
<div class="btn-group-demo">
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-lg" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br/>
<div class="btn-group-demo">
<div class="btn-group btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br/>
<div class="btn-group-demo">
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-sm" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br/>
<div class="btn-group-demo">
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="btn-group btn-group-xs" role="group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br/>
<br/>
<br/>
<p class="f-500 c-black m-b-5">Justified Button Groups</p>
<small>Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.</small>
<br/>
<br/>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
<br/>
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br/>
<br/>
<br/>
<p class="f-500 c-black m-b-5">Nesting</p>
<small>Place a '.btn-group' within another '.btn-group' when you want dropdown menus mixed with a series of buttons.</small>
<br/>
<br/>
<div class="btn-group-demo">
<div class="btn-group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle>
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-primary" uib-dropdown-toggle>
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>