Bootstrap 5 Tutorial

Bootstrap 5 Buttons

Last modified on: October 27, 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="4947ec3a-601e-4f2c-904a-5b05bf1acb83" 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 5: Buttons</h3>
<p>Bootstrap 5 provides a variety of button styles that can enhance the user interface of your web applications. Buttons are designed to trigger actions and can be easily customized with different styles, sizes, and states.</p>
<hr />
<h3>Key Features of Bootstrap 5 Buttons</h3>
<ol>
<li><strong>Multiple Styles</strong>: Choose from various contextual classes for different button styles (e.g., primary, secondary, success).</li>
<li><strong>Sizes</strong>: Use size classes to create small, large, or regular-sized buttons.</li>
<li><strong>States</strong>: Buttons can be disabled, active, or have different hover effects.</li>
<li><strong>Flexibility</strong>: Buttons can contain text, icons, or other HTML elements.</li>
</ol>
<hr />
<h3>Example: Creating Buttons in Bootstrap 5</h3>
<p>Here&rsquo;s an example demonstrating the different types of buttons available in Bootstrap 5:</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;!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.0"&gt;
    &lt;title&gt;Bootstrap 5 Buttons Example&lt;/title&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class="container mt-5"&gt;
        &lt;h1&gt;Bootstrap 5 Buttons&lt;/h1&gt;

&lt;!-- Default Buttons --&gt;
        &lt;button type="button" class="btn btn-primary"&gt;Primary Button&lt;/button&gt;
        &lt;button type="button" class="btn btn-secondary"&gt;Secondary 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-danger"&gt;Danger 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-info"&gt;Info Button&lt;/button&gt;
        &lt;button type="button" class="btn btn-light"&gt;Light Button&lt;/button&gt;
        &lt;button type="button" class="btn btn-dark"&gt;Dark Button&lt;/button&gt;
        &lt;button type="button" class="btn btn-link"&gt;Link Button&lt;/button&gt;

&lt;hr&gt;

&lt;!-- Button Sizes --&gt;
        &lt;h2&gt;Button Sizes&lt;/h2&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;hr&gt;

&lt;!-- Disabled Button --&gt;
        &lt;h2&gt;Disabled Button&lt;/h2&gt;
        &lt;button type="button" class="btn btn-primary" disabled&gt;Disabled Button&lt;/button&gt;
    &lt;/div&gt;

&lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
</div>
</div>
</div>
</div>
<h3>Explanation of the Code</h3>
<ul>
<li><strong>Container</strong>: The <code>.container</code> class creates a responsive fixed-width container.</li>
<li><strong>Button Classes</strong>: Each button uses the <code>.btn</code> class along with a contextual class (e.g., <code>.btn-primary</code>) to define its style.</li>
<li><strong>Button Sizes</strong>: Additional classes like <code>.btn-lg</code> and <code>.btn-sm</code> adjust the button sizes.</li>
<li><strong>Disabled State</strong>: The <code>disabled</code> attribute makes a button unclickable, giving it a different visual state.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More