BB2 And Twitter Bootstrap?

Most of you will be familiar with the term "twitter bootstrap" even if you have never used it. For those that don't know about it, the bootstrap is a set of templates,  code and CSS libraries, created to make web design easier. You have the basics provided to you, and then it's up to you to take that further if you wish.

While it is aimed primarily at those that are building their own webpages, there is no reason we can't use some of the bootstrap CSS to enhance our BB2 pages. In fact, there are CDNs (Content Delivery Network) online so we can reference the bootstrap css files and use their classes in our own designs. Cool!

Below, is a 6 cell grid, each holding a button with  some text in it. Just plain every day ordinary buttons that you get when you place <button>Example</button> in a raw HTML block.

While the cursor will show that the buttons are clickable, we haven't added any functionality to them yet. I will show you some of the things you can do with buttons once we have looked at how to actually create and style them.

Standard HTML Buttons

Well, they will work, but not particularly exciting to look at. Of course, we could create some CSS to jazz that up a bit. But how about we use the Bootstrap classes instead? That has all the styling we need already in place... all we need to do is add a few simple classes to our basic button. See the grid below.

Standard HTML Buttons with bootstrap classes applied

Nicer. We have some extra styling applied to our buttons, and we can choose from the 6 basic color schemes. But wouldn't these be more visually appealing if we added icons to reinforce the text? There is another CDN that we can reference called Font Awesome, which allows us to choose from about 360 different icons. 

Standard HTML Buttons with bootstrap classes and icon classes applied

And I can add a bootstrap class to make the buttons take up the fullwidth of the container, and increase the icon size. All this is done just by referencing the online style-sheets in the head of your page, and adding a few simple classes to your button tags. I said it will be simple and it will be, honest!

Standard HTML Buttons with bootstrap classes and icon classes applied, and set to fullwidth of each grid cell by adding the class btn-block

Ready To Give This a Try?

While I have only put a few buttons on this page, I hope perhaps it has piqued your interest. There is no code on this page, no instructions, no working examples. So now it's time to decide... do you want to learn a bit more about Twitter Bootstrap? 

The first article will be (as you suspected) all about buttons.

Comments

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