Bootstrap CSS – Grid System

Bootstrap is divided into 12 columns. It includes predefined classes for simple layout. Also you can design complex layout with easy predefined classes.

Class hierarchy is given as per follow :

  • .container or .container-fluid : This is a main class. .container-fluid is used for full width
    • .row – This class is used to make horizontal group of columns. After this class children must be .col-*
      • .col-* – This is used to display content.

 

Bootstrap has inbuilt classed to display page responsive.

Classes bifurcation is as per below.

  • For Large device : col-lg-*
  • For Medium device : col-md-*
  • For Small device : col-sm-*
  • For Extra small device : col-xs-*

Now, we learn how to display columns.

    1. To display content in full page.
    2. To display content in equal two column.
    3.  To display content in equal three column.

You can replace -md with -lg,-sm-xs according to device support.

Search with one more value

Today, I will show you how to display different value on list and how to search from another value.

When i was doing my project, i have to display list item with different search value. So i have customized bootstrap for this.

To do this use attribute “renderField”.

Example :

$('#typeahead').typeahead({

     renderField: "display_text",

});

you have to add this renderField into data object.

Data object example :

item = {}

item.display_text = "searchvalue1 searchvalue2";

item.value= "displayvalue";

When you type searchvalue1  or searchvalue2 or displayvalue. This item will show in all three search. and it will display displayvalue only.

 

#codewithgeek #codewithjaydip

Li color based on condition

Bootstrap Typeahead is used for autosuggestion list based on type text in input.

I have customized this js and added more function, so that you can easily used this for multi purpose.

Li color based on condition

To change color of list element based on search content. I have added colour attribute for this.

$('#typeahead').typeahead({
   colour: "colourCondition"
});

Here coloutCondition is javascript function

function colourCondition(item, i) {
       if (item.type == 3) {
            i.addClass("color-brown"
       }
}

Download bootstrap-typeahead.js from github