Buttons, Bootstrap, and Font Awesome

So... you took the red pill. Welcome to the world of Twitter Bootstrap. While the bootstrap is a big dark hole full of scripts and styles and templates, we aren't going to bother with all of that. Nope, what we want to do is cherry pick the bits that we can use to spice up a Block Builder 2 page, and forget the rest.

So I'm going to show you a few easy things that we can do. Create buttons, add bootstrap classes to make them look nice, and add icons to them. Then on the next page, we will look at some of the ways that you can use buttons on your pages.

First, Add These To the Head Section Of your Pages

To create our buttons using the Bootstrap and Font Awesome styles, we need to reference their online and publicly available style-sheets. Do not save a copy of these and host them on your website, just copy and paste the links provided below.

IMPORTANT. You must have the following tags in the head section of your page.

A Basic Bootstrap Button

This is a basic Bootstrap button. The classes used are the .btn, which gives the basic button. And .btn-primary which sets the color to blue.


<button class="btn btn-primary">
Example Button
</button>

There are six basic colors used with Bootstrap Buttons (plus another that removes the button styling to make it look like a plain link. I haven't included that in this article.)

These are the 6 standard colors used on Bootstrap buttons. The names of the classes give you an indication as to best practice when using them. For example, don't use the warning color for a signup button! . The classes used are the .btn, which gives the basic button. And .btn-* which sets the color to your choice. ALL buttons will use the .btn class, and that is combined with the class to set the required background.


<button class="btn btn-default">
btn-default
</button>


<button class="btn btn-primary">
btn-primary
</button>


<button class="btn btn-info">
btn-info
</button>


<button class="btn btn-success">
btn-success
</button>


<button class="btn btn-warning">
btn-warning
</button>


<button class="btn btn-danger">
btn-danger
</button>

Now we have some nicely styled buttons that we can use, and it's really not much more work that putting stock standard buttons on your page, is it? The next class we can add to our buttons, is to give them a full-width of the container. It would look nice if we had all our buttons an equal width, so I will set the button container to a width of 250px, and add a new class to the buttons. .btn-block

This shows the buttons whe they are set to take up the full width of the container. In this case, that container is 250px wide. If I just placed the buttons on my page, they would span the full width of the content column. You could use a grid block to place buttons side by side so they keep equal widths.

These are the same six buttons, with the btn-block class added to the button tag. The buttons are showing the class names I used for them as the button text. The copy and paste code below just have "Button Text" to keep the line length shorter ;-)


<button class="btn btn-default btn-block">
Button Text
</button>


<button class="btn btn-primary btn-block">
Button Text
</button>


<button class="btn btn-info btn-block">
Button Text
</button>


<button class="btn btn-success btn-block">
Button Text
</button>


<button class="btn btn-warning btn-block">
Button Text
</button>


<button class="btn btn-danger btn-block">
Button Text
</button>

Adding Icons To Your Buttons

Now that our buttons are looking good, it's time to add some icons to them. Font Awesome have over 360 different ones to choose from, and we use a tag in beside the button text to add the icon. It looks something like this...
<i class="fa fa-paper-plane"></i>

That class paper-plane would add a paper plane icon, suitable for putting on a submit or email button perhaps. We will use the exact same buttons as above, and this time add some some icons to them. The list of all the different ones available is at the Font Awesome Cheat Sheet page.

We will now add the Font Awesome icons. There are over 360 to choose from, with new ones being added all the time. We also have the option to increase their size if we want to.

These are the same six buttons, with the Font Awesome icons and some appropriate button text added.


<button class="btn btn-default btn-block">
<i class="fa fa-expand fa-lg"></i>
See Larger Version
</button>




<button class="btn btn-primary btn-block">
<i class="fa fa-paper-plane fa-lg"></i>
Send
</button>



<button class="btn btn-info btn-block">
<i class="fa fa-info fa-2x"></i>
More Information
</button>




<button class="btn btn-success btn-block">
<i class="fa fa-check-circle-o fa-2x"></i>
Subscription Confirmed
</button>





<button class="btn btn-warning btn-block">
<i class="fa fa-warning fa-3x"></i>
You Are About To Cancel
</button>




<button class="btn btn-danger btn-block">
<i class="fa fa-close fa-3x"></i>
You Have Been Terminated
</button>

You can increase the icon size. fa-lg gives you a larger icon. fa-2x is double and fa-3x is triple. There are 2 of each here. For default icon size, just omit that class.

If you would like an easy way to create your buttons, then this website will allow you to build up custom buttons using the bootstrap classes. You can then just grab the code and paste it into a Raw HTML block. The icons used are the bootstrap ones called glyphicon. If you use this method then you don't need the head tag that links to the Font Awesome CSS. .

Comments

Have your say about what you just read! Leave me a comment in the box below.

ShareFacebook Twitter