gora

It's a good practice to add breadcrumbs to websites/blogs to enhance the users to find their way around. Also it indicates user’s location (page) and hierarchy of the page within a website. Twitter bootstrap 3 comes with built-in CSS component for adding breadcrumbs . I'll show you how to add and customize the default bootstrap breadcrumb styles as per your requirement. You will learn about breadcrumb customizations such as changing bootstrap breadcrumbs separator, changing its background color, text color etc. For this tutorial, I assume you already have some basic working knowledge with bootstrap and know how to integrate bootstrap with HTML page. If you are new to bootstrap, here is a good tutorial about Creating Responsive Navbar with Bootstrap 3 which gives you knowledge about integrating bootstrap with HTML. How to Add Breadcrumbs in Twitter Bootstrap? To add breadcrumbs create an unordered list and add the page links you want. Next add "breadcrumb"...

Twitter Bootstrap has become one of the popular css frameworks on the web. Being a significant time-saver, several thousands of websites have been built using bootstrap framework. But most of the sites using bootstrap do very little to customize them, resulting in those websites looking similar to each other. On the contrary you could easily make your site to stand out from the crowd by using some premium bootstrap themes. So how those theme developers achieve this? Well! They don't stick to the defaults. If they could do it, then you can also do it by putting on some effort. Are you ready to give your website unique look and feel? Then come on, let me explain you how to customize bootstrap css to fit your own style and need. Luckily bootstrap provides a great foundation and employs pre-styled components, responsible grid layout and much more to facilitate rapid responsive development. So we don't have to reinvent the wheel but to change the css styles of those compone...

Jumbotron is one of the best features of Twitter Bootstrap Framework and we'll see in this tutorial how to build bootstrap jumbotron with background images. It is a light weight component that can be used to showcase the featured content of websites. You can also add a compelling call-to-action to the component. All sorts of websites especially commerce sites can get beneficial by using bootstrap jumbotron unit in their landing pages, and make the user to take desired action. If you want to learn more about customizing bootstrap framework , read through our earlier tutorials on similar topic. Change Bootstrap Navbar Color, Text & Hover Color How to Customize Bootstrap Breadcrumb Styles How to Create Bootstrap Buttons with Icons Now coming back to bootstrap jumbotron tutorial let us see some examples. Bootstrap Jumbotron Examples To build jumbotron unit to your landing pages, add a <div> block to the page and include the css class ".jumbotron" to ...

How to delete data from database in codeigniter? Over sometime I have been writing tutorials about codeigniter crud process like insert, update and fetch. This tutorial is the last part of the codeigniter crud series and it is about database delete in codeigniter and bootstrap frameworks. For the delete process, we are going to use codeigniter delete query which allows us to delete one or more records from database table. Create MySQL Database As for the database I'm going to use the same MySQL Database I have used in Insert and Update tutorials. To create the sample Employee DB, run these sql commands in MySQL. SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; CREATE TABLE IF NOT EXISTS `tbl_department` ( `department_id` int(4) NOT NULL AUTO_INCREMENT, `department_name` varchar(80) NOT NULL, PRIMARY KEY (`department_id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; INSERT INTO `tbl_department` (`department_id`, `department_name`) VALUES (1, 'Finance...

Hi, this CodeIgniter Bootstrap Tutorial will teach you How to Insert Form Data into MySQL Database using CodeIgniter, Bootstrap CSS framework and jQuery UI . I'm going to walk you through step-by-step, creating a form in codeigniter and insert those form data into database. To design the said php codeigniter form, we use twitter boostrap css framework and it's one of my all time favorite and saves time from creating style sheets of our own. If you wonder how to use bootstrap in codeigniter, then read this tutorial on Integrating Bootstrap with CodeIgniter . MySQL Database Example I'm going to use mysql database as an example for this tutorial. Here, take a look at the sample employee database I have. The fields that are highlighted in yellow color are primary keys and those ones in green are foreign keys. Now run this sql query in mysql to create the above database. SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO"; CREATE TABLE IF NOT EXISTS `tbl_department` ( ...

Hi! Let's see how to connect to remote mysql database using php script . Usually your web application and database will be hosted on the same web server. But this is not always the case. Some Applications could be resource hog, in which case, the database will be hosted on server separate from the application. Let's say you have a PHP script on server S1 and MySQL DB on Server S2 and you want to remotely connect the script from S1 to the DB on S2. So, how could you do it? When your Application server and Database server are different, you must establish remote connection to db. To do this, you need remote access enabled on the server. Connecting Remote MySQL Database/Server with PHP: For security reasons, remote access to the MySQL database is disabled by default. In order to connect the MySQL database from a different server, you need to enable remote access to MySQL server . That is, you must allow the connection within cPanel for the IP address from which you c...

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. This file upload plug-in creates an ajax form on go to upload files and comes with various options for us to customize the way it behaves like showing progress bar, cancelling upload in the middle, auto form submission, restrict the number of files and types of files to upload etc. It depends on Ajax Form Plug-in to automatically generate ajax form for uploading files without page refresh. You can either drag and drop the files in the form or select them with the upload button. Implementing jQuery Multiple File Upload with Progr...