Customize Twitter Bootstrap Navbar Tutorial

Posted by Valli Pandy on 4/19/2015 Be the first to comment!

Twitter Bootstrap provides Navbar component which is responsive in nature and can be used to serve as navigation menu for your web application or site. These navbars are collapsed and toggleable in mobile devices and stretch out horizontally for wider viewport. Bootstrap Navbar is available in two different themes, "navbar-default" for lighter shade and "navbar-inverse" for darker theme. However you need not always stick to what comes as default with bootstrap and can extend its functionality to suit your need.

customize-twitter-bootstrap-navbar-tutorial-example

PHP CodeIgniter Pagination with Twitter Bootstrap Styles - Example

Posted by Valli Pandy on 4/14/2015 Be the first to comment!

It's a well known story that codeigniter provides a good number of libraries required for robust web development and 'pagination' library is one among them. For those who are not familiar with the term pagination, this refers to the set of numbered links that allows you to navigate from page to page to view a large set of data. For example let's say you want to fetch and display some data from database and it contains several hundreds of records. In that case pagination will be very useful to display the database resultset in chunks and let the user to skim through several page links (similar to google search results).

codeigniter-pagination-with-twitter-bootstrap-styles

Twitter Bootstrap Search Box with Icon in NavBar Example

Posted by Valli Pandy on 4/09/2015 Be the first to comment!

Hi, we'll see how to add icon to search box in twitter bootstrap in this tutorial. It's just one of the unspoken rules of modern web design to include search box on every websites and blogs out there. Especially for content rich sites, having a search box on top will help the users to dig out the archives for the right information. Generally including a search bar on a website's top navigation menu is easy on the eyes. I am not going to discuss here about adding a search bar on bootstrap's navigation bar. As that topic had been already covered in this bootstrap navbar tutorial.

twitter-bootstrap-search-box-icon-navbar

Drag and Drop jQuery Multiple File Upload using AJAX PHP with Progress Bar

Posted by Valli Pandy on 4/02/2015 Be the first to comment!

Hi, we'll see how to upload multiple files using jQuery, AJAX and PHP in this tutorial. To upload multiple file in php we are going to use an awesome jquery file upload plug-in from hayageek.com. It is a drag and drop file upload plug-in that supports multiple file uploads at once along with progress bars. In HTML 5 drag and drop is part of the standard and it comes with inbuilt drag and drop api to support drag and drop feature in web projects.

drag-and-drop-jquery-multiple-file-upload-ajax-php

10 Amazing CSS Drop Cap Effects you can Copy Paste

Posted by Valli Pandy on 3/30/2015 Be the first to comment!

Today I have come up with some really cool and easy Drop Cap Effects using CSS. You can straight away copy paste the styles and use it, no tweaks required. Earlier we have tried some cool image effects. This time we are going to style the drop caps with few lines of CSS code. We’ll take full advantage of CSS text-shadow property to style the drop caps. Come, let’s start exploring.

CSS Drop Cap Effects

Twitter Bootstrap Table Styles Tutorial with Examples

Posted by Valli Pandy on 3/26/2015 Be the first to comment!

HTML Table Element displays your website data in tabular format but writing CSS styles of your own to improve the look and feel of those tables is definitely a headache. Never worry. Twitter Bootstrap CSS Framework comes to your rescue here. It provides a bunch of css classes to style the html tables. By using these bootstrap table styles along with the <table> tag you can greatly improve the appearance of the tables.

twitter-bootstrap-table-styles-tutorial-examples

Understanding Twitter Bootstrap Image Classes with Examples

Posted by Valli Pandy on 3/20/2015 Be the first to comment!

Twitter Bootstrap Framework provides so much of ready-made plug-ins and components for comprehensive web design. What does it offer to handle images? Speaking, Bootstrap tends to display images without border by default. It also provides some special image classes that can be used for styling them in your web projects.

twitter-bootstrap-image-classes-example

Contact Form

Name

Email *

Message *