Lesson 6: Buttons


Buttons in Bootstrap

There are tons of uses for buttons in Bootstrap. And since we are all web developers, buttons are a mainstay for what we do. Overall, they are very simple to use. There are a few tips I will include to make their use easier and above all, user-friendly.

Solid Buttons

Bootstrap contains a button for each of the color options available. There are two additional ones you should be aware of: transparent and link. Link buttons simply treat a hyperlink as a button - with all of the padding and spacing of a button. Transparent buttons do the same thing but are actual button elements. More on how I use that one later.

Example solid buttons.

Button markup is very simple. You assign the class btn to the element and then follow with the class btn-{color} markup that sets the color.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-transparent">Transparent</button>
<button type="button" class="btn btn-link">Link</button>


<button type="button" class="btn btn-primary">Save</button>
<a type="button" class="btn btn-transparent disabled">-OR-</a>
<button type="button" class="btn btn-danger">Cancel</button>

All types of button elements

Since there are 3 types of buttons available in HTML (button, submit, & reset) you can adjust them all to appear as Bootstrap buttons! You can apply the same thing to hyperlinks - which comes in really handy! Note the optional ending tag style of coding buttons instead of using a value attribute.

<input class="btn btn-primary" type="button" value="Input">
<input class="btn btn-primary" type="submit" value="Submit">
<input class="btn btn-primary" type="reset" value="Reset">
<button class="btn btn-primary" type="submit">No value button</button>
<a class="btn btn-primary" href="#" role="button">Link</a>

Outline buttons

There are alternate outline versions of each button color class. Keep in mind, these are transparent - so the center isn't white - it will show your background color through. This, oddly, is a known thing and cannot be corrected without custom CSS.


Here's an example on a dark background

<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

Custom buttons

The easiest way to create a custom button in Bootstrap is to:

  1. Create a blank CSS file - name it something like buttons.css
  2. Use this website
  3. Make sure you set the NAME of the button to something you will remember.
  4. Copy the code they give you and paste it into your new CSS file.
  5. Add the link to your new CSS file AFTER the call to the Bootstrap CSS file.


Here's a good example


And one more

Button Sizes

There are three size options in Bootstrap. The standard btn btn-{color} chain of classes creates a standard sized button. If you want something larger, you can add btn btn-{color} btn-lg to create a large button. Need a small button for something? You can add btn btn-{color} btn-sm to create a small button.

<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-primary">Standard button</button>
<button type="button" class="btn btn-secondary btn-lg">Large button</button>

Block Buttons

Sometimes you need a button to span across a column, DIV, table cell, or other container. This is super easy in Bootstrap - just use the btn-block class and it will span 100% of the parent containing element.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Block level button</button>