Bootstrap 3 Tutorial

Bootstrap 3 Buttons

Last modified on: October 28, 2024

<div class="flex-shrink-0 flex flex-col relative items-end">
<div>
<div class="pt-0">
<div class="gizmo-bot-avatar flex h-8 w-8 items-center justify-center overflow-hidden rounded-full">&nbsp;</div>
</div>
</div>
</div>
<div class="group/conversation-turn relative flex w-full min-w-0 flex-col agent-turn">
<div class="flex-col gap-1 md:gap-3">
<div class="flex max-w-full flex-col flex-grow">
<div class="min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words [.text-message+&amp;]:mt-5" dir="auto" data-message-author-role="assistant" data-message-id="0ac83a68-5388-4e98-acc2-57384999c51e" data-message-model-slug="gpt-4o-mini">
<div class="flex w-full flex-col gap-1 empty:hidden first:pt-[3px]">
<div class="markdown prose w-full break-words dark:prose-invert light">
<h3>Bootstrap 3: Buttons</h3>
<p>Bootstrap 3 provides a robust set of button styles and components that allow you to create visually appealing and interactive buttons for your web applications. These buttons are designed to be responsive and customizable, making it easy to integrate them into your layouts.</p>
<hr />
<h3>Basic Button Structure</h3>
<p>To create a button, use the <code>&lt;button&gt;</code> element or <code>&lt;a&gt;</code> tag with the <code>.btn</code> class along with one of the contextual button classes:</p>
<ul>
<li><code>.btn-default</code> - Default button style</li>
<li><code>.btn-primary</code> - Primary button style</li>
<li><code>.btn-success</code> - Success button style</li>
<li><code>.btn-info</code> - Info button style</li>
<li><code>.btn-warning</code> - Warning button style</li>
<li><code>.btn-danger</code> - Danger button style</li>
<li><code>.btn-link</code> - Link button style</li>
</ul>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!-- Button Examples --&gt;
&lt;button type="button" class="btn btn-default"&gt;Default Button&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Primary Button&lt;/button&gt;
&lt;button type="button" class="btn btn-success"&gt;Success Button&lt;/button&gt;
&lt;button type="button" class="btn btn-info"&gt;Info Button&lt;/button&gt;
&lt;button type="button" class="btn btn-warning"&gt;Warning Button&lt;/button&gt;
&lt;button type="button" class="btn btn-danger"&gt;Danger Button&lt;/button&gt;
&lt;a href="#" class="btn btn-link"&gt;Link Button&lt;/a&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Button Sizes</h3>
<p>Bootstrap 3 also allows you to change the size of buttons using the following classes:</p>
<ul>
<li><code>.btn-lg</code> - Large button</li>
<li><code>.btn-sm</code> - Small button</li>
<li><code>.btn-xs</code> - Extra small button</li>
</ul>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!-- Button Size Examples --&gt;
&lt;button type="button" class="btn btn-primary btn-lg"&gt;Large Button&lt;/button&gt;
&lt;button type="button" class="btn btn-primary"&gt;Default Button&lt;/button&gt;
&lt;button type="button" class="btn btn-primary btn-sm"&gt;Small Button&lt;/button&gt;
&lt;button type="button" class="btn btn-primary btn-xs"&gt;Extra Small Button&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Button States</h3>
<p>Buttons in Bootstrap 3 can also reflect different states, such as:</p>
<ul>
<li><strong>Active state</strong>: Indicated by adding the <code>.active</code> class.</li>
<li><strong>Disabled state</strong>: Add the <code>disabled</code> attribute to disable the button.</li>
</ul>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!-- Button States --&gt;
&lt;button type="button" class="btn btn-primary active"&gt;Active Button&lt;/button&gt;
&lt;button type="button" class="btn btn-primary" disabled&gt;Disabled Button&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Block Level Buttons</h3>
<p>To create full-width buttons, use the <code>.btn-block</code> class. This class makes buttons expand to the full width of the parent container.</p>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!-- Block Level Button --&gt;
&lt;button type="button" class="btn btn-primary btn-block"&gt;Block Level Button&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>Example with Multiple Buttons</h3>
<div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary dark:bg-gray-950">
<div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between rounded-t-md h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary">html</div>
<div class="sticky top-9 md:top-[5.75rem]">
<div class="absolute bottom-0 right-2 flex h-9 items-center">
<div class="flex items-center rounded bg-token-sidebar-surface-primary px-2 font-sans text-xs text-token-text-secondary dark:bg-token-main-surface-secondary">
<pre class="language-markup"><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;title&gt;Bootstrap 3 Buttons Example&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container"&gt;
    &lt;h2&gt;Bootstrap 3 Buttons&lt;/h2&gt;

&lt;!-- Default Button --&gt;
    &lt;button type="button" class="btn btn-default"&gt;Default Button&lt;/button&gt;

&lt;!-- Primary Button --&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Primary Button&lt;/button&gt;

&lt;!-- Success Button --&gt;
    &lt;button type="button" class="btn btn-success"&gt;Success Button&lt;/button&gt;

&lt;!-- Info Button --&gt;
    &lt;button type="button" class="btn btn-info"&gt;Info Button&lt;/button&gt;

&lt;!-- Warning Button --&gt;
    &lt;button type="button" class="btn btn-warning"&gt;Warning Button&lt;/button&gt;

&lt;!-- Danger Button --&gt;
    &lt;button type="button" class="btn btn-danger"&gt;Danger Button&lt;/button&gt;

&lt;!-- Link Button --&gt;
    &lt;a href="#" class="btn btn-link"&gt;Link Button&lt;/a&gt;

&lt;h3&gt;Button Sizes&lt;/h3&gt;
    &lt;button type="button" class="btn btn-primary btn-lg"&gt;Large Button&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary"&gt;Default Button&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary btn-sm"&gt;Small Button&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary btn-xs"&gt;Extra Small Button&lt;/button&gt;

&lt;h3&gt;Button States&lt;/h3&gt;
    &lt;button type="button" class="btn btn-primary active"&gt;Active Button&lt;/button&gt;
    &lt;button type="button" class="btn btn-primary" disabled&gt;Disabled Button&lt;/button&gt;

&lt;h3&gt;Block Level Button&lt;/h3&gt;
    &lt;button type="button" class="btn btn-primary btn-block"&gt;Block Level Button&lt;/button&gt;
&lt;/div&gt;

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
&lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More