tabler-ui

<!doctype html> <html lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="Content-Language" content="en" /> <meta name="msapplication-TileColor" content="#2d89ef"> <meta name="theme-color" content="#4188c9"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <link rel="icon" href="../favicon.ico" type="image/x-icon"/> <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico" />  <title>Buttons - Documentation - tabler.github.io - a responsive, flat and full featured admin template</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,500,500i,600,600i,700,700i&subset=latin-ext"> <script src="../assets/js/require.min.js"></script> <script> requirejs.config({ baseUrl: '..' }); </script>  <link href="../assets/css/dashboard.css" rel="stylesheet" /> <script src="../assets/js/dashboard.js"></script>  <link href="../assets/plugins/charts-c3/plugin.css" rel="stylesheet" /> <script src="../assets/plugins/charts-c3/plugin.js"></script>  <link href="../assets/plugins/maps-google/plugin.css" rel="stylesheet" /> <script src="../assets/plugins/maps-google/plugin.js"></script>  <script src="../assets/plugins/input-mask/plugin.js"></script> </head> <body class=""> <div class="page"> <div class="page-main"> <div class="header py-4"> <div class="container"> <div class="d-flex"> <a class="header-brand" href="../index.html"> <img src="../demo/brand/tabler.svg" class="header-brand-img" alt="tabler logo"> </a> <div class="d-flex order-lg-2 ml-auto"> <div class="nav-item d-none d-md-flex"> <a href="https://github.com/tabler/tabler" class="btn btn-sm btn-outline-primary" target="_blank">Source code</a> </div> <div class="dropdown d-none d-md-flex"> <a class="nav-link icon" data-toggle="dropdown"> <i class="fe fe-bell"></i> <span class="nav-unread"></span> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/male/41.jpg)"></span> <div> <strong>Nathan</strong> pushed new commit: Fix page load performance issue. <div class="small text-muted">10 minutes ago</div> </div> </a> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/1.jpg)"></span> <div> <strong>Alice</strong> started new task: Tabler UI design. <div class="small text-muted">1 hour ago</div> </div> </a> <a href="#" class="dropdown-item d-flex"> <span class="avatar mr-3 align-self-center" style="background-image: url(demo/faces/female/18.jpg)"></span> <div> <strong>Rose</strong> deployed new version of NodeJS REST Api V3 <div class="small text-muted">2 hours ago</div> </div> </a> <div class="dropdown-divider"></div> <a href="#" class="dropdown-item text-center text-muted-dark">Mark all as read</a> </div> </div> <div class="dropdown"> <a href="#" class="nav-link pr-0 leading-none" data-toggle="dropdown"> <span class="avatar" style="background-image: url(../demo/faces/female/25.jpg)"></span> <span class="ml-2 d-none d-lg-block"> <span class="text-default">Jane Pearson</span> <small class="text-muted d-block mt-1">Administrator</small> </span> </a> <div class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-user"></i> Profile </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-settings"></i> Settings </a> <a class="dropdown-item" href="#"> <span class="float-right"><span class="badge badge-primary">6</span></span> <i class="dropdown-icon fe fe-mail"></i> Inbox </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-send"></i> Message </a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-help-circle"></i> Need help? </a> <a class="dropdown-item" href="#"> <i class="dropdown-icon fe fe-log-out"></i> Sign out </a> </div> </div> </div> <a href="#" class="header-toggler d-lg-none ml-3 ml-lg-0" data-toggle="collapse" data-target="#headerMenuCollapse"> <span class="header-toggler-icon"></span> </a> </div> </div> </div> <div class="header collapse d-lg-flex p-0" id="headerMenuCollapse"> <div class="container"> <div class="row align-items-center"> <div class="col-lg-3 ml-auto"> <form class="input-icon my-3 my-lg-0"> <input type="search" class="form-control header-search" placeholder="Search…" tabindex="1"> <div class="input-icon-addon"> <i class="fe fe-search"></i> </div> </form> </div> <div class="col-lg order-lg-first"> <ul class="nav nav-tabs border-0 flex-column flex-lg-row"> <li class="nav-item"> <a href="../index.html" class="nav-link"><i class="fe fe-home"></i> Home</a> </li> <li class="nav-item"> <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-box"></i> Interface</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="../cards.html" class="dropdown-item ">Cards design</a> <a href="../charts.html" class="dropdown-item ">Charts</a> <a href="../pricing-cards.html" class="dropdown-item ">Pricing cards</a> </div> </li> <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-calendar"></i> Components</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="../maps.html" class="dropdown-item ">Maps</a> <a href="../icons.html" class="dropdown-item ">Icons</a> <a href="../store.html" class="dropdown-item ">Store</a> <a href="../blog.html" class="dropdown-item ">Blog</a> <a href="../carousel.html" class="dropdown-item ">Carousel</a> </div> </li> <li class="nav-item dropdown"> <a href="javascript:void(0)" class="nav-link" data-toggle="dropdown"><i class="fe fe-file"></i> Pages</a> <div class="dropdown-menu dropdown-menu-arrow"> <a href="../profile.html" class="dropdown-item ">Profile</a> <a href="../login.html" class="dropdown-item ">Login</a> <a href="../register.html" class="dropdown-item ">Register</a> <a href="../forgot-password.html" class="dropdown-item ">Forgot password</a> <a href="../400.html" class="dropdown-item ">400 error</a> <a href="../401.html" class="dropdown-item ">401 error</a> <a href="../403.html" class="dropdown-item ">403 error</a> <a href="../404.html" class="dropdown-item ">404 error</a> <a href="../500.html" class="dropdown-item ">500 error</a> <a href="../503.html" class="dropdown-item ">503 error</a> <a href="../email.html" class="dropdown-item ">Email</a> <a href="../empty.html" class="dropdown-item ">Empty page</a> <a href="../rtl.html" class="dropdown-item ">RTL mode</a> </div> </li> <li class="nav-item dropdown"> <a href="../form-elements.html" class="nav-link"><i class="fe fe-check-square"></i> Forms</a> </li> <li class="nav-item"> <a href="../gallery.html" class="nav-link"><i class="fe fe-image"></i> Gallery</a> </li> <li class="nav-item"> <a href="../docs/index.html" class="nav-link active"><i class="fe fe-file-text"></i> Documentation</a> </li> </ul> </div> </div> </div> </div> <div class="my-3 my-md-5"> <div class="container"> <div class="page-header"> <h1 class="page-title"> Documentation </h1> </div> <div class="row"> <div class="col-lg-3 order-lg-1 mb-4"> <a href="https://github.com/tabler/tabler" class="btn btn-block btn-primary mb-6"> <i class="fe fe-github mr-2"></i>Browse source code </a>  <div class="list-group list-group-transparent mb-0"> <a href="../docs/index.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-flag"></i></span>Introduction</a> </div>  <div class="list-group list-group-transparent mb-0"> <a href="../docs/alerts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-alert-triangle"></i></span>Alerts</a> <a href="../docs/avatars.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-user"></i></span>Avatars</a> <a href="../docs/buttons.html" class="list-group-item list-group-item-action active"><span class="icon mr-3"><i class="fe fe-plus-square"></i></span>Buttons</a> <a href="../docs/colors.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-feather"></i></span>Colors</a> <a href="../docs/cards.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-image"></i></span>Cards</a> <a href="../docs/charts.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-pie-chart"></i></span>Charts</a> <a href="../docs/form-components.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-check-square"></i></span>Form components</a> <a href="../docs/tags.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-tag"></i></span>Tags</a> <a href="../docs/typography.html" class="list-group-item list-group-item-action"><span class="icon mr-3"><i class="fe fe-type"></i></span>Typography</a> </div> <div class="d-none d-lg-block mt-6"> <a href="https://github.com/tabler/tabler/edit/dev/src/_docs/buttons.md" class="text-muted">Edit this page</a> </div> </div> <div class="col-lg-9"> <div class="card"> <div class="card-body"> <div class="text-wrap p-lg-6"> <h2 class="mt-0 mb-4">Buttons</h2> <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> <h3 id="button-tag">Button tag</h3> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <h3 id="button-variations">Button variations</h3> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <h3 id="disabled-buttons">Disabled buttons</h3> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <h3 id="color-variations">Color variations</h3> <p>The classic button, in different colors.</p> <div class="example"> <div class="btn-list"> <a href="#" class="btn btn-blue">Blue</a> <a href="#" class="btn btn-azure">Azure</a> <a href="#" class="btn btn-indigo">Indigo</a> <a href="#" class="btn btn-purple">Purple</a> <a href="#" class="btn btn-pink">Pink</a> <a href="#" class="btn btn-red">Red</a> <a href="#" class="btn btn-orange">Orange</a> <a href="#" class="btn btn-yellow">Yellow</a> <a href="#" class="btn btn-lime">Lime</a> <a href="#" class="btn btn-green">Green</a> <a href="#" class="btn btn-teal">Teal</a> <a href="#" class="btn btn-cyan">Cyan</a> <a href="#" class="btn btn-gray">Gray</a> <a href="#" class="btn btn-gray-dark">Dark gray</a> </div> </div> <div class="highlight"> <pre><code class="language-html" data-lang="html"><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 btn-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 btn-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 btn-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 btn-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 btn-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 btn-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 btn-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 btn-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 btn-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 btn-teal"</span><span class="nt">></span>Teal<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-cyan"</span><span class="nt">></span>Cyan<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-gray"</span><span class="nt">></span>Gray<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-gray-dark"</span><span class="nt">></span>Dark gray<span class="nt"></a></span></code></pre> </div> <h3 id="square-buttons">Square buttons</h3> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <h3 id="pill-buttons">Pill buttons</h3> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <h3 id="outline-buttons">Outline buttons</h3> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <h3 id="button-size">Button size</h3> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <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="highlight"> <pre><code class="language-html" data-lang="html"><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> <h3 id="button-with-icon">Button with icon</h3> <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="fe fe-upload mr-2"></i>Upload</button> <button type="button" class="btn btn-warning"><i class="fe fe-heart mr-2"></i>I like</button> <button type="button" class="btn btn-success"><i class="fe fe-check mr-2"></i>I agree</button> <button type="button" class="btn btn-outline-primary"><i class="fe fe-plus mr-2"></i>More</button> <button type="button" class="btn btn-danger"><i class="fe fe-link mr-2"></i>Link</button> <button type="button" class="btn btn-info"><i class="fe fe-message-circle mr-2"></i>Comment</button> </div> </div> <div class="highlight"> <pre><code class="language-html" data-lang="html"><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">"fe fe-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">"fe fe-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">"fe fe-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">"fe fe-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">"fe fe-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">"fe fe-message-circle mr-2"</span><span class="nt">></i></span>Comment<span class="nt"></button></span></code></pre> </div> <h3 id="social-buttons">Social buttons</h3> <div class="example"> <div class="btn-list"> <button type="button" class="btn btn-facebook"><i class="fa fa-facebook mr-2"></i>Facebook</button> <button type="button" class="btn btn-twitter"><i class="fa fa-twitter mr-2"></i>Twitter</button> <button type="button" class="btn btn-google"><i class="fa fa-google mr-2"></i>Google</button> <button type="button" class="btn btn-youtube"><i class="fa fa-youtube mr-2"></i>Youtube</button> <button type="button" class="btn btn-vimeo"><i class="fa fa-vimeo mr-2"></i>Vimeo</button> <button type="button" class="btn btn-dribbble"><i class="fa fa-dribbble mr-2"></i>Dribble</button> <button type="button" class="btn btn-github"><i class="fa fa-github mr-2"></i>Github</button> <button type="button" class="btn btn-instagram"><i class="fa fa-instagram mr-2"></i>Instagram</button> <button type="button" class="btn btn-pinterest"><i class="fa fa-pinterest mr-2"></i>Pinterest</button> <button type="button" class="btn btn-vk"><i class="fa fa-vk mr-2"></i>VKontakte</button> <button type="button" class="btn btn-rss"><i class="fa fa-rss mr-2"></i>RSS</button> <button type="button" class="btn btn-flickr"><i class="fa fa-flickr mr-2"></i>Flickr</button> <button type="button" class="btn btn-bitbucket"><i class="fa fa-bitbucket mr-2"></i>Bitbucket</button> </div> </div> <div class="highlight"> <pre><code class="language-html" data-lang="html"><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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-bitbucket mr-2"</span><span class="nt">></i></span>Bitbucket<span class="nt"></button></span></code></pre> </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="fa fa-facebook"></i></button> <button type="button" class="btn btn-icon btn-twitter"><i class="fa fa-twitter"></i></button> <button type="button" class="btn btn-icon btn-google"><i class="fa fa-google"></i></button> <button type="button" class="btn btn-icon btn-youtube"><i class="fa fa-youtube"></i></button> <button type="button" class="btn btn-icon btn-vimeo"><i class="fa fa-vimeo"></i></button> <button type="button" class="btn btn-icon btn-dribbble"><i class="fa fa-dribbble"></i></button> <button type="button" class="btn btn-icon btn-github"><i class="fa fa-github"></i></button> <button type="button" class="btn btn-icon btn-instagram"><i class="fa fa-instagram"></i></button> <button type="button" class="btn btn-icon btn-pinterest"><i class="fa fa-pinterest"></i></button> <button type="button" class="btn btn-icon btn-vk"><i class="fa fa-vk"></i></button> <button type="button" class="btn btn-icon btn-rss"><i class="fa fa-rss"></i></button> <button type="button" class="btn btn-icon btn-flickr"><i class="fa fa-flickr"></i></button> <button type="button" class="btn btn-icon btn-bitbucket"><i class="fa fa-bitbucket"></i></button> </div> </div> <div class="highlight"> <pre><code class="language-html" data-lang="html"><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">"fa fa-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">"fa fa-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">"fa fa-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">"fa fa-youtube"</span><span class="nt">></i></button></span> <span class="nt"><button</span>