1135 lines
91 KiB
PHP
1135 lines
91 KiB
PHP
<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> |