<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title> Soporte - La Pieza.DO </title>
<!-- /Required meta tags -->
<!-- Favicon -->
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<!-- /Favicon -->
<!-- All CSS -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Rubik">
<!-- Vendor Css -->
<link rel="stylesheet" href="css/vendor.css">
<!-- /Vendor Css -->
<!-- Plugin Css -->
<link rel="stylesheet" href="css/plugins.css">
<!-- Plugin Css -->
<!-- Icons Css -->
<link rel="stylesheet" href="css/icons.css">
<!-- /Icons Css -->
<!-- Style Css -->
<link rel="stylesheet" href="css/style.css">
<!-- /Style Css -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/line-awesome/1.3.0/line-awesome/css/line-awesome.min.css" integrity="sha512-vebUliqxrVkBy3gucMhClmyQP9On/HAWQdKDXRaAlb/FKuTbxkjPKUyqVOxAcGwFDka79eTF+YXwfke1h3/wfg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- /All CSS -->
</head>
<body>
<!-- PreLoader -->
<div id="preloader">
<div id="status">
<div class="spinner"></div>
</div>
</div>
<!--Preloader-->
<!-- Mobile Canvus Menu -->
<div class="mobile_canvus_menu">
<div class="close_btn">
<img src="img/icon/close-dark.png" alt="">
</div>
<div class="menu_part_lux">
<ul class="menu_list wd_scroll">
<li><a href='/'>Inicio</a></li>
<li>
<a href="./intro.php">Documentación
<i class="las la-angle-down"></i>
</a>
<ul class="list">
<li><a href='./intro.php'>Inicia Aquí</a></li>
<li><a href='./article.php'>Articulos</a></li>
<li><a href='./buttons.php'>Botones</a></li>
<li><a href='./image.php'>Imagenes</a></li>
<li><a href='./pagination.php'>Paginacion</a></li>
<li><a href='./changelog.php'>Registro de Cámbios</a></li>
</ul>
</li>
<li>
<a href="#">Pages
<i class="las la-angle-down"></i>
</a>
<ul class="list">
<li><a href='./404.php'>404</a></li>
<li><a href='./article.php'>Articulos</a></li>
<li><a href='./login.php'>Login</a></li>
<li><a href='./register.php'>Registro</a></li>
<li><a href='./forget-password.php'>Olvidé password</a></li>
<li><a href='./faqs.php'>Faq</a></li>
<li><a href='./changelog.php'>Registro de Cámbios</a></li>
</ul>
</li>
<li>
<a href='./blog.php'>Blog
<i class="las la-angle-down"></i>
</a>
<ul class="list">
<li><a href='./blog.php'>Blog</a></li>
<li><a href='./blog-deatail.php'>Detalles del Blog</a></li>
</ul>
</li>
<li><a href="./contact.php">Contacto</a></li>
</ul>
</div>
<div class="menu_btm">
<a class='ticket-btn' href="./contact.php"><i class="las la-ticket-alt"></i> Crear un Ticket</a>
</div>
</div>
<!-- /Mobile Canvus Menu -->
<!-- /Header -->
<header class="header_area">
<div class="main_menu">
<div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class='navbar-brand' href='/'><img src="img/logo.png" srcset="img/logo-2x.png 2x" alt="" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li><a href='./index.php'>Inicio</a></li>
<li class="dropdown submenu">
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='./intro.php' role='button'>Documentación</a>
<i class="las la-angle-down mobile_dropdown" aria-hidden="true" data-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li><a href='./intro.php'>Inicia Aquí</a></li>
<li><a href='./article.php'>Articulos</a></li>
<li class="active"><a href='./buttons.php'>Botones</a></li>
<li><a href='./image.php'>Imagenes</a></li>
<li><a href='./pagination.php'>Paginacion</a></li>
<li><a href='./changelog.php'>Registro de Cámbios</a></li>
</ul>
</li>
<li class="dropdown submenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">Paginas</a>
<i class="las la-angle-down mobile_dropdown" aria-hidden="true" data-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li><a href='./404.php'>404</a></li>
<li><a href='./articlev'>Articulos</a></li>
<li><a href='./login.php'>Login</a></li>
<li><a href='./register.php'>Registro</a></li>
<li><a href='./forget-password.php'>Olvidé password</a></li>
<li><a href='./faqs.php'>Faq</a></li>
<li><a href='./changelog.php'>Registro de Cámbios</a></li>
<li class="dropdown submenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true"
aria-expanded="false">Sub menu
<i class="las la-angle-right mobile_dropdown" aria-hidden="true" data-toggle="dropdown"></i>
</a>
<ul class="dropdown-menu">
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown submenu">
<a aria-expanded='false' aria-haspopup='true' class='dropdown-toggle' data-toggle='dropdown' href='./blog.php' role='button'>Blog
</a>
<i class="las la-angle-down mobile_dropdown" aria-hidden="true" data-toggle="dropdown"></i>
<ul class="dropdown-menu">
<li><a href='./blog.php'>Blog</a></li>
<li><a href='./blog-deatail.php'>Detalles del Blog</a></li>
</ul>
</li>
<li><a href='./contact.php'>Contacto</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="header-btn">
<a href='/contact.php'><i class="las la-ticket-alt"></i>Crea un Ticket</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="right_burger">
<ul class="nav">
<li>
<div class="search_btn" data-toggle="modal" data-target="#exampleModal">
<img src="img/icon/search.png" alt="" />
</div>
</li>
<li>
<div class="menu_btn">
<img src="img/icon/menu.png" alt="" />
</div>
</li>
</ul>
</div>
</div>
</header>
<!-- /Header -->
<!-- Breadcrumb -->
<section class="bg-half-150 d-table w-100 bg-light" style="background: url('img/bg/Breadcrumb.png') top center;">
<!-- Container -->
<div class="container">
<!-- row -->
<div class="row mt-5">
<!-- col -->
<div class="col-lg-12">
<div class="title-heading text-center text-md-center">
<h2>Buttons</h2>
<p class="mt-3 mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<nav aria-label="breadcrumb" class="d-inline-block mt-4">
<ul class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href='/'>Docuto</a></li>
<li class="breadcrumb-item active" aria-current="page">Buttons</li>
</ul>
</nav>
</div>
</div>
<!-- col -->
</div>
<!-- row -->
</div>
<!-- Container -->
</section>
<!-- /Breadcrumb -->
<!-- Button -->
<section class="buttons pt-100 pb-50">
<!-- Container -->
<div class="container">
<!-- row -->
<div class="row justify-content-center">
<!-- col -->
<div class="col-lg-4">
<div class="sidebar-wrapper">
<div class="sidebar-widget">
<h4 class="sidebar-title">Doc Nav </h4>
<div class="sidebar-search sidebar-widget">
<div class="sidebar-search-form">
<form action="#" method="post">
<div class="form-group">
<input type="search" name="search-field" placeholder="Search Now"
required="">
<button type="submit"><i class="ri-search-2-line"></i></button>
</div>
</form>
</div>
</div>
</div>
<div class="sidebar-widget">
<div class="doc-nav">
<ul id="faq">
<li> <a href='/intro'>Getting
started</a></li>
<li> <a href='/alerts'>Alerts</a> </li>
<li> <a href='/buttons'>Buttons</a></li>
<li> <a href='/image'>Image</a> </li>
<li> <a href='/pagination'>Pagination</a> </li>
<li> <a href='/colors'>Colors</a> </li>
<li> <a href='/changelog'>Changelog</a> </li>
<li> <a data-toggle="collapse" data-parent="#faq" href="#drop-down-menu-1">
Menu levels 1 <i class="la la-angle-down"></i></a>
<ul id="drop-down-menu-1" class="panel-collapse collapse">
<li><a href="#intro">Menu 1 </a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3 </a></li>
</ul>
</li>
<li> <a data-toggle="collapse" data-parent="#faq" href="#drop-down-menu-2">
Menu levels 2 <i class="la la-angle-down"></i></a>
<ul id="drop-down-menu-2" class="panel-collapse collapse">
<li><a href="#intro">Menu 1 </a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3 </a></li>
</ul>
</li>
<li> <a data-toggle="collapse" data-parent="#faq" href="#drop-down-menu-3">
Menu levels 3<i class="la la-angle-down"></i></a>
<ul id="drop-down-menu-3" class="panel-collapse collapse">
<li><a href="#intro">Menu 1 </a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3 </a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- /col -->
<!-- col -->
<div class="col-lg-8">
<div class="card">
<div class="card-header">
<h3 class="card-title">Buttons</h3>
</div>
<div class="card-body">
<p>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more.
Includes support for a handful of contextual variations, sizes, states, and
more.</p>
<p>The <code class="highlighter-rouge">.btn</code> classes are designed to be used
with the <code class="highlighter-rouge"><button></code> element. However,
you can also use these classes on <code class="highlighter-rouge"><a></code> or
<code class="highlighter-rouge"><input></code> elements (though some
browsers may apply a slightly different rendering).</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-primary" role="button">Link</a>
<button class="btn btn-primary">Button</button>
<input type="button" class="btn btn-primary" value="Input" />
<input type="submit" class="btn btn-primary" value="Submit" />
<input type="reset" class="btn btn-primary" value="Reset" />
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">role=</span><span class="s">"button"</span><span class="nt">></span>Link<span class="nt"></a></span>
<span class="nt"><button</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Button<span class="nt"></button></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Input"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"submit"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Submit"</span> <span class="nt">/></span>
<span class="nt"><input</span> <span class="na">type=</span><span class="s">"reset"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span> <span class="na">value=</span><span class="s">"Reset"</span> <span class="nt">/></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Button variations</h3>
</div>
<div class="card-body">
<p>Use any of the available button classes to quickly create a styled button . We
provide a variety of colors for you to express different emotions.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-primary">Primary</a>
<a href="#" class="btn btn-secondary">Secondary</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>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Primary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Secondary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Success<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">></span>Info<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">></span>Warning<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Danger<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-link"</span><span class="nt">></span>Link<span class="nt"></a></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Disabled buttons</h3>
</div>
<div class="card-body">
<p>Make buttons look inactive by adding the disabled boolean attribute to any <code
class="highlighter-rouge">.btn</code> element. <code
class="highlighter-rouge"><a></code>s don’t support the disabled
attribute, so you must add the <code class="highlighter-rouge">.disabled</code>
class to make it visually appear disabled.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-primary disabled">Primary</a>
<a href="#" class="btn btn-secondary disabled">Secondary</a>
<a href="#" class="btn btn-success disabled">Success</a>
<a href="#" class="btn btn-info disabled">Info</a>
<a href="#" class="btn btn-warning disabled">Warning</a>
<a href="#" class="btn btn-danger disabled">Danger</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary disabled"</span><span class="nt">></span>Primary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary disabled"</span><span class="nt">></span>Secondary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success disabled"</span><span class="nt">></span>Success<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-info disabled"</span><span class="nt">></span>Info<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-warning disabled"</span><span class="nt">></span>Warning<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger disabled"</span><span class="nt">></span>Danger<span class="nt"></a></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Color variations</h3>
</div>
<div class="card-body">
<p>The classic button, in different colors.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn text-white bg-blue">Blue</a>
<a href="#" class="btn text-white bg-azure">Azure</a>
<a href="#" class="btn text-white bg-indigo">Indigo</a>
<a href="#" class="btn text-white bg-purple">Purple</a>
<a href="#" class="btn text-white bg-pink">Pink</a>
<a href="#" class="btn text-white bg-red">Red</a>
<a href="#" class="btn text-white bg-orange">Orange</a>
<a href="#" class="btn text-white bg-yellow">Yellow</a>
<a href="#" class="btn text-white bg-lime">Lime</a>
<a href="#" class="btn text-white bg-green">Green</a>
<a href="#" class="btn text-white bg-teal">Teal</a>
<a href="#" class="btn text-white bg-cyan">Cyan</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-blue"</span><span class="nt">></span>Blue<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-azure"</span><span class="nt">></span>Azure<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-indigo"</span><span class="nt">></span>Indigo<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-purple"</span><span class="nt">></span>Purple<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-pink"</span><span class="nt">></span>Pink<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-red"</span><span class="nt">></span>Red<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-orange"</span><span class="nt">></span>Orange<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-yellow"</span><span class="nt">></span>Yellow<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-lime"</span><span class="nt">></span>Lime<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-green"</span><span class="nt">></span>Green<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn text-white bg-teal"</span><span class="nt">></span>Teal<span class="nt"></a></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Square buttons</h3>
</div>
<div class="card-body">
<p>Add <code class="highlighter-rouge">.btn-square</code> to button to remove
border-radius.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-square btn-primary">Primary</a>
<a href="#" class="btn btn-square btn-secondary">Secondary</a>
<a href="#" class="btn btn-square btn-success">Success</a>
<a href="#" class="btn btn-square btn-info">Info</a>
<a href="#" class="btn btn-square btn-warning">Warning</a>
<a href="#" class="btn btn-square btn-danger">Danger</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-primary"</span><span class="nt">></span>Primary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-secondary"</span><span class="nt">></span>Secondary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-success"</span><span class="nt">></span>Success<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-info"</span><span class="nt">></span>Info<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-warning"</span><span class="nt">></span>Warning<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-square btn-danger"</span><span class="nt">></span>Danger<span class="nt"></a></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Pill buttons</h3>
</div>
<div class="card-body">
<p>Add <code class="highlighter-rouge">.btn-pill</code> class to any button to make
them more rounded.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-pill btn-primary">Primary</a>
<a href="#" class="btn btn-pill btn-secondary">Secondary</a>
<a href="#" class="btn btn-pill btn-success">Success</a>
<a href="#" class="btn btn-pill btn-info">Info</a>
<a href="#" class="btn btn-pill btn-warning">Warning</a>
<a href="#" class="btn btn-pill btn-danger">Danger</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-primary"</span><span class="nt">></span>Primary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-secondary"</span><span class="nt">></span>Secondary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-success"</span><span class="nt">></span>Success<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-info"</span><span class="nt">></span>Info<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-warning"</span><span class="nt">></span>Warning<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-pill btn-danger"</span><span class="nt">></span>Danger<span class="nt"></a></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Outline buttons</h3>
</div>
<div class="card-body">
<p>In need of a button, but not the hefty background colors they bring? Replace the
default modifier classes with the <code class="highlighter-rouge">.btn-outline-*</code>
ones to remove all
background images and colors on any button.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-outline-primary">Primary</a>
<a href="#" class="btn btn-outline-secondary">Secondary</a>
<a href="#" class="btn btn-outline-success">Success</a>
<a href="#" class="btn btn-outline-info">Info</a>
<a href="#" class="btn btn-outline-warning">Warning</a>
<a href="#" class="btn btn-outline-danger">Danger</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">></span>Primary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-secondary"</span><span class="nt">></span>Secondary<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-success"</span><span class="nt">></span>Success<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-info"</span><span class="nt">></span>Info<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-warning"</span><span class="nt">></span>Warning<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-outline-danger"</span><span class="nt">></span>Danger<span class="nt"></a></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Button size</h3>
</div>
<div class="card-body">
<p>Add <code class="highlighter-rouge">.btn-lg</code> or <code
class="highlighter-rouge">.btn-sm</code> for additional sizes.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-lg"</span><span class="nt">></span>Large button<span class="nt"></button></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-secondary btn-sm">Small button</button>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-sm"</span><span class="nt">></span>Small button<span class="nt"></button></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
<p>Create block level buttons—those that span the full width of a parent—by adding
<code class="highlighter-rouge">.btn-block</code>.</p>
<div class="example">
<button type="button" class="btn btn-primary btn-block">Block level
button</button>
<button type="button" class="btn btn-secondary btn-block">Block level
button</button>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-primary btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary btn-block"</span><span class="nt">></span>Block level button<span class="nt"></button></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Button with icon</h3>
</div>
<div class="card-body">
<p>Basic buttons are traditional buttons with borders and background with an extra
commponent like an icon. You can place it either on the left or the right which
ever you want with different color opitons.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-dark"><i
class="ri-upload-line mr-2"></i>Upload</button>
<button type="button" class="btn btn-warning"><i class="ri-thumb-up-line mr-2"></i>I
like</button>
<button type="button" class="btn btn-success"><i class="ri-check-line mr-2"></i>I
agree</button>
<button type="button" class="btn btn-outline-primary"><i
class="ri-add-line mr-2"></i>More</button>
<button type="button" class="btn btn-danger"><i
class="ri-links-fill mr-2"></i>Link</button>
<button type="button" class="btn btn-info"><i
class="ri-chat-4-line mr-2"></i>Comment</button>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dark"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"le le-upload mr-2"</span><span class="nt">></i></span>Upload<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-warning"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"le le-heart mr-2"</span><span class="nt">></i></span>I like<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"le le-check mr-2"</span><span class="nt">></i></span>I agree<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-outline-primary"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"le le-plus mr-2"</span><span class="nt">></i></span>More<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"le le-link mr-2"</span><span class="nt">></i></span>Link<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-info"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"le le-message-circle mr-2"</span><span class="nt">></i></span>Comment<span class="nt"></button></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Social buttons</h3>
</div>
<div class="card-body">
<div class="example">
<div class="btn-list">
<button type="button" class="btn mb-1 btn-facebook"><i
class="la la-facebook mr-2"></i>Facebook</button>
<button type="button" class="btn mb-1 btn-twitter"><i
class="la la-twitter mr-2"></i>Twitter</button>
<button type="button" class="btn mb-1 btn-google"><i
class="la la-google mr-2"></i>Google</button>
<button type="button" class="btn mb-1 btn-youtube"><i
class="la la-youtube mr-2"></i>Youtube</button>
<button type="button" class="btn mb-1 btn-vimeo"><i
class="la la-vimeo mr-2"></i>Vimeo</button>
<button type="button" class="btn mb-1 btn-dribbble"><i
class="la la-dribbble mr-2"></i>Dribble</button>
<button type="button" class="btn mb-1 btn-github"><i
class="la la-github mr-2"></i>Github</button>
<button type="button" class="btn mb-1 btn-instagram"><i
class="la la-instagram mr-2"></i>Instagram</button>
<button type="button" class="btn mb-1 btn-pinterest"><i
class="la la-pinterest mr-2"></i>Pinterest</button>
<button type="button" class="btn mb-1 btn-bitbucket"><i
class="la la-bitbucket mr-2"></i>Bitbucket</button>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-facebook"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-facebook mr-2"</span><span class="nt">></i></span>Facebook<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-twitter"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-twitter mr-2"</span><span class="nt">></i></span>Twitter<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-google"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-google mr-2"</span><span class="nt">></i></span>Google<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-youtube"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-youtube mr-2"</span><span class="nt">></i></span>Youtube<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-vimeo"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-vimeo mr-2"</span><span class="nt">></i></span>Vimeo<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-dribbble"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-dribbble mr-2"</span><span class="nt">></i></span>Dribble<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-github"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-github mr-2"</span><span class="nt">></i></span>Github<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-instagram"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-instagram mr-2"</span><span class="nt">></i></span>Instagram<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-pinterest"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-pinterest mr-2"</span><span class="nt">></i></span>Pinterest<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-vk"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-vk mr-2"</span><span class="nt">></i></span>VKontakte<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-rss"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-rss mr-2"</span><span class="nt">></i></span>RSS<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-flickr"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-flickr mr-2"</span><span class="nt">></i></span>Flickr<span class="nt"></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-bitbucket"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-bitbucket mr-2"</span><span class="nt">></i></span>Bitbucket<span class="nt"></button></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
<p>You can use only icons.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-icon btn-facebook"><i
class="la la-facebook"></i></button>
<button type="button" class="btn btn-icon btn-twitter"><i
class="la la-twitter"></i></button>
<button type="button" class="btn btn-icon btn-google"><i
class="la la-google"></i></button>
<button type="button" class="btn btn-icon btn-youtube"><i
class="la la-youtube"></i></button>
<button type="button" class="btn btn-icon btn-vimeo"><i
class="la la-vimeo"></i></button>
<button type="button" class="btn btn-icon btn-dribbble"><i
class="la la-dribbble"></i></button>
<button type="button" class="btn btn-icon btn-github"><i
class="la la-github"></i></button>
<button type="button" class="btn btn-icon btn-instagram"><i
class="la la-instagram"></i></button>
<button type="button" class="btn btn-icon btn-pinterest"><i
class="la la-pinterest"></i></button>
<button type="button" class="btn btn-icon btn-vk"><i class="la la-vk"></i></button>
<button type="button" class="btn btn-icon btn-rss"><i
class="la la-rss"></i></button>
<button type="button" class="btn btn-icon btn-flickr"><i
class="la la-flickr"></i></button>
<button type="button" class="btn btn-icon btn-bitbucket"><i
class="la la-bitbucket"></i></button>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-facebook"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-facebook"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-twitter"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-twitter"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-google"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-google"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-youtube"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-youtube"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-vimeo"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-vimeo"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-dribbble"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-dribbble"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-github"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-github"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-instagram"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-instagram"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-pinterest"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-pinterest"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-vk"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-vk"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-rss"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-rss"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-flickr"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-flickr"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-bitbucket"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"la la-bitbucket"</span><span class="nt">></i></button></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Icon buttons</h3>
</div>
<div class="card-body">
<p>Icon only button. Add <code class="highlighter-rouge">.btn-icon</code> class to
remove unnecessary padding from button.</p>
<div class="example">
<div class="btn-list">
<button type="button" class="btn btn-icon btn-primary"><i
class="ri-lightbulb-line"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-github"><i
class="ri-github-line"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-success"><i
class="ri-download-line"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-warning"><i
class="ri-alert-line"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-danger"><i
class="ri-delete-bin-7-line"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-purple"><i
class="ri-pie-chart-line"></i></button>
<button type="button" class="btn btn-icon btn-primary btn-secondary"><i
class="ri-share-line"></i></button>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ri-lightbulb-line"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-github"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ri-github-line"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-success"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ri-download-line"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-warning"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ri-alert-line"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-danger"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ri-delete-bin-7-line"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-purple"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ri-pie-chart-line"</span><span class="nt">></i></button></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-icon btn-primary btn-secondary"</span><span class="nt">><i</span> <span class="na">class=</span><span class="s">"ri-share-line"</span><span class="nt">></i></button></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">Button dropdown</h3>
</div>
<div class="card-body">
<p>Wrap the dropdown’s toggle (your button or link) and the dropdown menu within
<code class="highlighter-rouge">.dropdown</code>, or another element that
declares <code class="highlighter-rouge">position: relative;</code>. Dropdowns
can be triggered from <code class="highlighter-rouge"><a></code> or <code
class="highlighter-rouge"><button></code> elements to better fit your
potential needs.</p>
<div class="example">
<div class="btn-list">
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown">
<i class="le le-calendar"></i>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown">
<i class="le le-calendar mr-2"></i>Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
<div class="dropdown">
<button type="button" class="btn btn-secondary dropdown-toggle"
data-toggle="dropdown">
Show calendar
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
<a class="dropdown-item" href="javascript:void(0)">Dropdown link</a>
</div>
</div>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"le le-calendar"</span><span class="nt">></i></span>
<span class="nt"></button></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><i</span> <span class="na">class=</span><span class="s">"le le-calendar mr-2"</span><span class="nt">></i></span>Show calendar
<span class="nt"></button></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown"</span><span class="nt">></span>
<span class="nt"><button</span> <span class="na">type=</span><span class="s">"button"</span> <span class="na">class=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">data-toggle=</span><span class="s">"dropdown"</span><span class="nt">></span>
Show calendar
<span class="nt"></button></span>
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"dropdown-menu"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"dropdown-item"</span> <span class="na">href=</span><span class="s">"#"</span><span class="nt">></span>Dropdown link<span class="nt"></a></span>
<span class="nt"></div></span>
<span class="nt"></div></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3 class="card-title">List of buttons</h3>
</div>
<div class="card-body">
<p>You can now create a list of buttons with the <code
class="highlighter-rouge">.btn-list</code> container.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn btn-success">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
<a href="#" class="btn btn-danger">Cancel</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-success"</span><span class="nt">></span>Save changes<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Save and continue<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-danger"</span><span class="nt">></span>Cancel<span class="nt"></a></span>
<span class="nt"></div></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
<p>If the list is very long, it will automatically wrap on multiple lines, while
keeping all buttons evenly spaced.</p>
<div class="example">
<div class="btn-list">
<a href="#" class="btn mb-1 btn-secondary">One</a>
<a href="#" class="btn mb-1 btn-secondary">Two</a>
<a href="#" class="btn mb-1 btn-secondary">Three</a>
<a href="#" class="btn mb-1 btn-secondary">Four</a>
<a href="#" class="btn mb-1 btn-secondary">Five</a>
<a href="#" class="btn mb-1 btn-secondary">Six</a>
<a href="#" class="btn mb-1 btn-secondary">Seven</a>
<a href="#" class="btn mb-1 btn-secondary">Eight</a>
<a href="#" class="btn mb-1 btn-secondary">Nine</a>
<a href="#" class="btn mb-1 btn-secondary">Ten</a>
<a href="#" class="btn mb-1 btn-secondary">Eleven</a>
<a href="#" class="btn mb-1 btn-secondary">Twelve</a>
<a href="#" class="btn mb-1 btn-secondary">Thirteen</a>
<a href="#" class="btn mb-1 btn-secondary">Fourteen</a>
<a href="#" class="btn mb-1 btn-secondary">Fifteen</a>
<a href="#" class="btn mb-1 btn-secondary">Sixteen</a>
<a href="#" class="btn mb-1 btn-secondary">Seventeen</a>
<a href="#" class="btn mb-1 btn-secondary">Eighteen</a>
<a href="#" class="btn mb-1 btn-secondary">Nineteen</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-list"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>One<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Two<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Three<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Four<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Five<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Six<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Seven<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Eight<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Nine<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Ten<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Eleven<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Twelve<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Thirteen<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Fourteen<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Fifteen<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Sixteen<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Seventeen<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Eighteen<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Nineteen<span class="nt"></a></span>
<span class="nt"></div></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
<p>Use the <code class="highlighter-rouge">.text-center</code> or the <code
class="highlighter-rouge">.text-right</code> modifiers to alter the
alignment.</p>
<div class="example">
<div class="btn-list text-center">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-list text-center"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Save and continue<span class="nt"></a></span>
<span class="nt"></div></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
<div class="example">
<div class="btn-list text-right">
<a href="#" class="btn btn-primary">Save changes</a>
<a href="#" class="btn btn-secondary">Save and continue</a>
</div>
</div>
<div class="code-toolbar">
<pre class=" language-markup">
<code class="language-markup" id="copy">
<span class="nt"><div</span> <span class="na">class=</span><span class="s">"btn-list text-right"</span><span class="nt">></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-primary"</span><span class="nt">></span>Save changes<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">href=</span><span class="s">"#"</span> <span class="na">class=</span><span class="s">"btn btn-secondary"</span><span class="nt">></span>Save and continue<span class="nt"></a></span>
<span class="nt"></div></span></code></pre>
<div class="toolbar">
<div class="toolbar-item"><span>Markup</span></div>
<div class="toolbar-item"><a class="cbtn" data-clipboard-action="copy"
data-original-title="Copied!" data-clipboard-target="#copy">Copy</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /col -->
</div>
<!-- /row -->
</div>
<!-- /Container -->
</section>
<!-- /Button -->
<!-- /Newsletter -->
<section class="newsletter-area pt-50">
<!-- Container -->
<div class="container">
<!-- row -->
<div class="row">
<!-- col -->
<div class="col-md-8 col-12 col-center">
<div class="newsletter" style="background-image: url(img/bg/newsletter-bg.jpg);">
<form action="#" method="POST">
<input type="email" class="news-email"
placeholder="Subscribe Newsletter (Enter Email Address)" />
<button type="submit" class="news-btn">Subscribe</button>
</form>
</div>
</div>
<!-- col -->
</div>
<!-- /row -->
</div>
<!-- /Container -->
</section>
<!-- /Newsletter -->
<!-- Footer -->
<footer class="footer-area" style="background-image: url(img/bg/map.png);">
<!-- Container -->
<div class="container text-center">
<!-- row -->
<div class="row">
<div class="col-md-6 col-12 col-center">
<h1 class="footer-logo">Docuto</h1>
<p>Docuto is a Support & Help Center Template to create
your own
24/7 self-service customer
support center.</p>
</div>
</div>
<!-- /row -->
<!-- col -->
<div class="col-md-4 col-12 foot-divider col-center"></div>
<!-- /col -->
<ul class="social-link">
<li><a href="#"><i class="ri-facebook-fill"></i></a></li>
<li><a href="#"><i class="ri-instagram-line"></i></a></li>
<li><a href="#"><i class="ri-twitter-line"></i></a></li>
<li><a href="#"><i class="ri-youtube-line"></i></a></li>
</ul>
<p class="copyright-text">© 2020 Docuto all right reserved designed by
Aacvo
</p>
</div>
<!-- /Container -->
</footer>
<!-- /Footer -->
<!-- Back to top -->
<div id="thetop"></div>
<div id="backtotop">
<a href="#" id="scroll">
<i class="las la-chevron-up"></i>
</a>
</div>
<!-- /Back to top -->
<!-- Search Popup -->
<div class="modal fade search_modal" id="exampleModal" tabindex="-1" role="dialog" aria-hidden="true">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<img src="img/icon/close-white.png" alt="">
</button>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="input-group">
<input type="text" class="form-control" placeholder="Type here..."
aria-label="Recipient's username" aria-describedby="button-addon3">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon3"><i
class="ri-search-2-line"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Search Popup -->
<!-- JS -->
<!-- Vendor Js -->
<script src="js/vendors.js"></script>
<!-- /Vendor js -->
<!-- Plugins Js -->
<script src="js/plugins.js"></script>
<!-- /Plugins Js -->
<!-- Main JS -->
<script src="js/main.js"></script>
<!-- /Main JS -->
<!-- /JS -->
</body>
</html> |