Bootstrap Buttons

The button element is one of the more useful Hypertext Markup Language (HTML) elements in the sense that it enables the user to interact with a page. 

Logging in, subscribing, deleting or opening something, showing a menu, changing the color theme are actions performed with buttons.

The default browser button styles are not the best looking, and not modern by any means.

By customizing their styling on every project, we repeat the same code many times for the same results.

Again, Bootstrap coers us. Take a look at what’s possible with Bootstrap buttons.

Colored Buttons

    <button class="btn btn-primary">button 1</button>
    <button class="btn btn-secondary">button 2</button>
    <button class="btn btn-info">button 3</button>
    <button class="btn btn-warning">button 4</button>
    <button class="btn btn-danger">button 5</button>
    <button class="btn btn-success">button 6</button>
    <button class="btn btn-light">button 7</button>
    <button class="btn btn-dark">button 8</button>
    <button class="btn btn-link">button 9</button>

Regarding colors, we can use every Bootstrap’s predefined ones, plus the BTN-LINK option, to apply Bootstrap’s styling for links.

All of the colored options get nice uniform padding, and a quick color transition to a slightly darker shade when hovered over with the cursor. The link has an underline on hover.

If we only declare the BTN class, Bootstrap will only remove the default browser styling:

<button>Without Bootstrap</button>
<button class="btn">With Bootstrap</button>

As we can see here:

Outline Buttons

We can use the same colors to create buttons with just an outline:

 	<button class="btn btn-outline-primary">button 1</button>
    <button class="btn btn-outline-secondary">button 2</button>
    <button class="btn btn-outline-info">button 3</button>
    <button class="btn btn-outline-warning">button 4</button>
    <button class="btn btn-outline-danger">button 5</button>
    <button class="btn btn-outline-success">button 6</button>
    <button class="btn btn-outline-light">button 7</button>
    <button class="btn btn-outline-dark">button 8</button>
    <button class="btn btn-outline-link">button 9</button>

They get the same background color as the outline, and the text becomes white or black, depending on the contrast. The light and yellow (WARNING) are get the black text. However, The link version does not support this option.

Sizing

Bootstrap supports three sizes for buttons: small, regular, and large.
We add another class to select the size like so:

<div class="m-5">
      <button class="btn btn-primary btn-sm">small button 1</button>
      <button class="btn btn-warning btn-sm">small button 2</button>
      <button class="btn btn-primary btn-sm">small button 3</button>
    </div>
    <div class="m-5">
      <button class="btn btn-primary">regular button 1</button>
      <button class="btn btn-warning">regular button 2</button>
      <button class="btn btn-danger">regular button 3</button>
    </div>
    <div class="m-5">
      <button class="btn btn-primary btn-lg">large button 1</button>
      <button class="btn btn-warning btn-lg">large button 2</button>
      <button class="btn btn-danger btn-lg">large button 3</button>
    </div>

Three buttons of each size are made, and wrapped each size in a div with class M-5 just to give them a bit of margin, to space them out.

Block Level Buttons

If we want a button that’s the full width of its containing element, we add a class of BTN-BLOCK to it. Let’s create a simple form, a common case for this method.

<div class="form-group">
          <label for="username">username</label>
          <input type="text" class="form-control" />
          <div class="form-group"></div>
          <label for="email">Email</label>
          <input type="email" class="form-control" />
        </div>
        <button class="btn btn-lg btn-block btn-primary">
          Block Level Button
        </button>
        <button class="btn btn-lg btn-secondary my-2">Regular button</button>
      </form>

We won’t go into detail about Bootstrap form classes. 

We just made a simple form that accepts a username and email, and has one block level button and one regular button. 

MT-2 is again just margin (top) added to separate the two buttons.

And here we can see the difference:

Button State

Like with many other Bootstrap components, we can change the appearance of a button with a state class, that is ACTIVE or DISABLED.

Active State

An active button has a slightly darker background, border, and shadow. 

      <button class="btn btn-primary">Regular</button>
      <button class="btn btn-primary active">Active</button>
      <button class="btn btn-primary">Regular</button>

Disabled State

In contrast, disabled buttons use lighter shades for the same properties. Know that adding the DISABLED class will only give the button the lighter colors. To make it truly disabled, we must declare it as the buttons attribute:

	<button class="btn btn-primary disabled">Disabled Looking</button>
    <button class="btn btn-primary" disabled>Truly Disabled</button>

The one with the class DISABLED is still clickable, and will perform an action if it has one.

For assistive technologies, we need to also include a ARIA-DISABLED=“TRUE” attribute, so screen reader users know there’s a disabled button on the screen.

Also, currently <a> elements don’t support the DISABLED attribute, so to get the disabled look we must include the class.

<a class="btn btn-danger" disabled>Attribute Not Supported</a>
      <a href="#" class="btn btn-danger disabled">Disabled Look</a>

In the case of <a> tags, the class DISABLED adds the CSS rule POINTER-EVENTS: NONE, which disables mouse clicks.

However, this is not yet fully supported on all web browsers, and even on supported ones, the link can still be accessed via keyboard. 

To make sure that the function is completely disabled, we should add the TABINDEX=“-1” attribute, so they can’t be focused even with a keyboard.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"

Venus, Software Engineer at Rockbot

Find Your Bootcamp Match

You should not use <a> tags as buttons anyway, but it’s good to know.

Button Groups

Just like with CARDS < ( in publishing at time of writing ) in Bootstrap, we can use a GROUP class to fuse the buttons together into a single element visually.

<div class="btn-group">
      <button class="btn btn-primary">button 1</button>
      <button class="btn btn-warning">button 2</button>
      <button class="btn btn-info">button 3</button>
      <button class="btn btn-danger">button 4</button>
    </div>

We simply wrap them in a div with the BTN-GROUP class and that’s it!

The behavior is exactly the same, but now they’re right next to each other, and the outer corners are nicely rounded.

To Sum It Up

Buttons can be found on nearly every website, and they’re a very important part of the online experience. We can log into our accounts, order something online, subscribe to a newsletter, or block all that spam landing in our inbox with buttons. Without them, websites would be digital business cards. Through Bootstrap, we can also make buttons a beautiful component of our sites.