Category Archives: Twitter Bootstrap

Jul 23 2013
13

How to Create a Recent/Popular Posts Section with Pagination Using Twitter Bootstrap + JavaScript

Posted by | Tutorial, Twitter Bootstrap | 2 Comments

Twitter Bootstrap Pagination

Twitter Bootstrap provides a nice design base for displaying a wide range of content, and we can use its styling in a more dynamic sense with the following tutorial. We’re going to focus on using a row with spans + JavaScript to create a functional recent/popular posts snippet. The real beauty of this is that it can also easily be combined with a CMS function like WordPress’s post query.

Read More

Jun 03 2013
9

How to Create a WordPress Theme with Twitter Bootstrap

Posted by | Tutorial, Twitter Bootstrap, WordPress | 2 Comments

Bootstrap can be adapted towards a wide range of applications, for example, content management. WordPress’s complex but easy-to-use theme structure is a great platform for taking advantage of this. Since our primary focus will be on the versatility of Bootstrap as a framework, this tutorial may assume you’ve already some basic knowledge of theming for WordPress. Read More

May 17 2013
3

How to Build a Single-Page Site with Twitter Bootstrap’s Navigation Tabs and a Fixed Sidebar

Posted by | Twitter Bootstrap | 3 Comments

Bootstrap’s tab component can be a bit tricky to set up at first, but it can ultimately prove pretty useful when building things like a multi-section form or photo group. Using this functionality, we’re going to look at how to build a single-page document with tabbed navigation and a fixed sidebar. This can be a good approach to smaller sites with minimal info, compact portfolios, or sectioned resumes. You’ll need to include bootstrap.js for this to work, so make sure jQuery is in place as well. Read More

May 06 2013
18

How to Build a Modal Contact Form in Twitter Bootstrap with PHP + AJAX

Posted by | Tutorial, Twitter Bootstrap | 3 Comments

With the built-in styles provided to us by Twitter Bootstrap, designing a simple contact form becomes streamlined. When you’re looking to streamline your site even further, you might not even need a dedicated contact page if no other info would be found there. A modal box is a nice, unobtrusive alternative, and Bootstrap allows us to also create that with ease. Let’s take a look at how to put that together then add PHP & AJAX to make a no-refresh contact form come to life. Read More

Apr 29 2013
25

How to Integrate Simple Parallax with Twitter Bootstrap

Posted by | Tutorial, Twitter Bootstrap | 15 Comments

Thanks to the flexibility of Twitter Bootstrap, you’re not in any way limited only to the framework’s default container and grid styles. It can actually be quite easy to introduce new layout options to your site without needing to worry about disrupting Bootstrap’s functionality. With this tutorial, we’ll learn how to do that by integrating a simple scrolling parallax effect to the page. Read More

Feb 21 2013
18

How To Build A Responsive Lightbox Gallery With Twitter Bootstrap

Posted by | Tutorial, Twitter Bootstrap | 7 Comments

Integrating Twitter Bootstrap with PrettyPhoto

Images are a driving force of the web. Compelling images can bring visitors to your website, and exciting displays can keep them there. Over the past few months we have delved into the possibilities of Twitter Bootstrap. At times, however, Bootstrap alone does not contain every component that we may need for a project.

Today we will discover how to complement a Twitter Bootstrap-powered image gallery by implementing the PrettyPhoto lightbox plugin! The end result will be an excellent template to build out image galleries that are simple to put together and incredibly easy to manage. Read More

Start planning your project today. Get Started