Bootstrap 4 Tutorial

Bootstrap 4 JS Button

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">
<h2 class="relative p-1 rounded-sm flex items-center justify-center bg-token-main-surface-primary text-token-text-primary h-8 w-8">JavaScript Buttons in Bootstrap 4</h2>
</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="8d1da935-7e79-4360-bce0-106c78cdec12" data-message-model-slug="gpt-4o">
<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">
<p>Bootstrap 4 provides a variety of pre-styled buttons that can be enhanced with JavaScript to add interactivity, such as toggling states, showing/hiding content, and triggering alerts. Here&rsquo;s a guide on creating buttons with Bootstrap styles and JavaScript functionality.</p>
<hr />
<h3>1. Creating Basic Bootstrap Buttons</h3>
<p>Bootstrap 4 offers several button styles:</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;button type="button" class="btn btn-primary"&gt;Primary&lt;/button&gt;
&lt;button type="button" class="btn btn-secondary"&gt;Secondary&lt;/button&gt;
&lt;button type="button" class="btn btn-success"&gt;Success&lt;/button&gt;
&lt;button type="button" class="btn btn-danger"&gt;Danger&lt;/button&gt;
&lt;button type="button" class="btn btn-warning"&gt;Warning&lt;/button&gt;
&lt;button type="button" class="btn btn-info"&gt;Info&lt;/button&gt;
&lt;button type="button" class="btn btn-light"&gt;Light&lt;/button&gt;
&lt;button type="button" class="btn btn-dark"&gt;Dark&lt;/button&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p>Each button uses the <code>.btn</code> class along with a contextual class (e.g., <code>.btn-primary</code>, <code>.btn-success</code>) for color styling.</p>
<hr />
<h3>2. Adding Interactivity with JavaScript</h3>
<p>Here are some common use cases for JavaScript-enhanced buttons.</p>
<h4>Example 1: Toggle Button Text</h4>
<p>This example toggles the button&rsquo;s text between "Show More" and "Show Less."</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;button onclick="toggleText(this)" class="btn btn-primary"&gt;Show More&lt;/button&gt;

&lt;script&gt;
  function toggleText(button) {
    button.textContent = button.textContent === 'Show More' ? 'Show Less' : 'Show More';
  }
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Explanation</strong>: The <code>toggleText</code> function checks the button&rsquo;s current text and switches it accordingly.</li>
</ul>
<hr />
<h4>Example 2: Show/Hide Content on Button Click</h4>
<p>This example shows and hides a paragraph of text when the button is clicked.</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;button onclick="toggleContent()" class="btn btn-info"&gt;Toggle Content&lt;/button&gt;
&lt;p id="content" style="display: none;"&gt;This is the content that will be shown or hidden.&lt;/p&gt;

&lt;script&gt;
  function toggleContent() {
    const content = document.getElementById('content');
    content.style.display = content.style.display === 'none' ? 'block' : 'none';
  }
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Explanation</strong>: The <code>toggleContent</code> function toggles the display style of the <code>p</code> element with ID <code>content</code>.</li>
</ul>
<hr />
<h4>Example 3: Button Loading State</h4>
<p>You can simulate a loading state by changing the button&rsquo;s text and disabling it temporarily.</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;button onclick="showLoading(this)" class="btn btn-success"&gt;Submit&lt;/button&gt;

&lt;script&gt;
  function showLoading(button) {
    button.textContent = 'Loading...';
    button.disabled = true;

setTimeout(() =&gt; {
      button.textContent = 'Submit';
      button.disabled = false;
    }, 2000); // Simulates a 2-second loading time
  }
&lt;/script&gt;
</code></pre>
</div>
</div>
</div>
</div>
<ul>
<li><strong>Explanation</strong>: The <code>showLoading</code> function changes the button text to "Loading..." and disables it. After 2 seconds, it resets the text and re-enables the button.</li>
</ul>
<hr />
<h3>&nbsp;</h3>
</div>
</div>
</div>
</div>
</div>
</div>

Web Technology View More