Render Charts 100% Width In Boostrap Tabs

The problem  You would like to render charts at 100% width (Google Charts, Highcharts, CanvaJS, or other favorite charts) when the user clicks on a tab in Boostrap. Even though your CSS or inline style set to width: 100%, the chart is rendered wider or smaller than the width of the tab. Why is this happening? Bootstrap tabs use the display property to toggle … Read More

Perfect CSS Link Hover Colors

It is always nice to get visual feedback when mousing-over link text. This effect is often achieved simply by changing the link color to a lighter or darker color. For darker backgrounds it is often better to make the text lighter on hover and for lighter backgrounds you can go a few shades darker. The trouble with applying this effect … Read More

Five and Ten Column Layouts in Bootstrap

If you would like an equal five and ten column layout in Twitter Bootstrap, then include the following CSS in your Bootstrap stylesheet. Applying the classes to your HTML If you do not intend to use the 12 column layout then I would highly recommend customizing bootstrap and setting the Grid system to ten columns.

Twitter Bootstrap WordPress Template

As of writing, I have just updated my blog to use the Bootstrap 3 RC1 front-end framework with the addition of the new Glyphicons (although I have not used the Glyphicons in many places). Since this was a new release of Bootstrap, I could not find any WordPress templates available online, so I decided to build my own. This is my first venture into … Read More

The Key To Making Quick CSS Changes

The best way I have found to quickly make informed CSS changes is by using the Inspect Element functionality in Chrome. This allows you to quickly find elements of the page and make style changes that are reflected immediately in the browser. This is a great way to see how the style is reflected on the site and later be … Read More