---

Search posts under Bootstrap:

---

  <div>
       <button type="button" class="btn btn-primary btn-lg">DotNetFunda</button>
  </div> 

<div>
       <button type="button" class="btn btn-default">DotNetFunda</button>
       <button type="button" class="btn btn-primary">TechFunda</button>
       <button type="button" class="btn btn-info">ItFunda</button>
       <button type="button" class="btn btn-success">KidsFunda</button>
       <button type="button" class="btn btn-warning">FarmingFunda</button>
       <button type="button" class="btn btn-danger">FundooVideo</button>
       <button type="button" class="btn btn-link">SNarayan</button>
</div> 

In the above code snippet we have defined how to use the different button styles. We have taken div  as section  and we are declaring buttons with following Bootstrap button class names

1. btn-default  renders the button as default white color
2. btn-primary renders it as light blue color
3. btn-info       renders it as skyblue color
4. btn-success renders the button as green color
5. btn-warning renders as orange color
6. btn-dangerrenders as red color
   
7. btn-link renders the button as hyperlink

output

Button Sizes

There are different sizes of the buttons they are 

• btn-lg - is used to produce the button as largesize
  
• btn-md - is used to produce the button as medium size
  
• btn-sm - is use to produce the button as small size
  
• btn-xs - is used to produce the button size as extra small
  

   
<h1> Sizes of the buttons</h1>
    <div>
        <button type="button" class="btn btn-primary btn-lg">DotNetFunda</button>
        <button type="button" class="btn btn-success btn-md">TechFunda</button>
        <button type="button" class="btn btn-warning btn-sm">ItFunda</button>
        <button type="button" class="btn btn-danger btn-xs">KidsFunda</button>
    </div>
  

Button-size

In the above code snippet we have defined the sizes of the buttons. We have taken div section and we are declaring buttons with following Bootstrap button class names as

1.   btn-lg -renders the size of the button as large.
2.   btn-md- renders the size of the button as medium
3.   btn-sm- renders the size of the button as small
4.    btn-xs- renders the size of the button as extra small

output

Active Button

The .Active is used to appear the button pressed

 
<h1> Active buttons are used to keep the buttons active</h1>
    <div>
        <button type="button" class="btn btn-success active">TechFunda</button>
    </div>
 

Active-Button

In the above code snippet we are using button class active which is used to make the button as active.

output

Disable Button

The disable button is used to disable the button 

   
 <h3> Disable buttons are used to keep the buttons as disable</h3>
    <div>
        <button type="button" class="btn btn-success disabled">TechFunda</button>
    </div> 

Disable Button

In the above code snippet we are using button class as disabled which is used to make the button disable.

output

 

Block Button

Block button is used to exapnd the full width of the button.

   
<h5>Block button is used to exapnd the full width of the button</h5>
    <div>
        <button type="button" class="btn btn-primary btn-block">TechFunda</button>
    </div>

Block button

btn-block is used to expand the width of the button.

output

Button Tags

There are different button tags 

They are

• <a>
• <input>
• <button>
• <submit>

    
<h5>Contextual colors</h5>
    <div>
        <a class="btn btn-success" href="#" role="button">Link</a>
        <button class="btn btn-warning" type="submit">Button</button>
        <input class="btn btn-primary" type="button" value="Input">
        <input class="btn btn-info" type="submit" value="Submit">
    </div>

Button tag

In the above code snippet we have taken div section , Tags as  <input>, <link>, <button>,<submit> which are used as button tags.

output

Toggle Button:

Toggle Button is used as when the active button is clicked it is used to toggle back the button or replace the button.

<h5>Toggle Button</h5>
    <div>
        <button type="button" class="btn btn-info" data-toggle="button">Click Me</button>
        <button type="button" class="btn btn-success" data-toggle="button">Click Me too</button>
    </div>

Toggle Button

data-toggle is used to expand the width of the button

output

Button Group:

The button group is used to group the button.

<h5>Button group</h5>
    <div class="btn-group">
        <button type="button" class="btn btn-primary">DotNetFunda</button>
        <button type="button" class="btn btn-danger">TechFunda</button>
        <button type="button" class="btn btn-success">ItFunda</button>
        <button type="button" class="btn btn-info">KidsFunda</button>
    </div> 

Button group

btn-group is used to grou the buttons

output

Button group vertical

Button group vertical is used to group the buttons as vertical

 <h5>Button group vertical</h5>
    <div class="btn-group-vertical">
        <button type="button" class="btn btn-primary">DotNetFunda</button>
        <button type="button" class="btn btn-danger">TechFunda</button>
        <button type="button" class="btn btn-success">ItFunda</button>
        <button type="button" class="btn btn-info">KidsFunda</button>
    </div> 

Button group-vertical

btn-group-vertical is used to group the buttons in vertical line.

output

Radio button:

Radio button is used to select the single button among different buttons

 <h5>Radio Button</h5>
    <div class="btn-group" data-toggle="buttons">
        <span class="btn btn-danger">
            <input type="radio" name="options">Audi
        </span>
        <span class="btn btn-danger">
            <input type="radio" name="options">Mercedes
        </span>
        <span class="btn btn-danger">
            <input type="radio" name="options">BMW
        </span>
        <span class="btn btn-danger">
            <input type="radio" name="options">Ferrari
        </span>
    </div> 

Radio button

radio is used to select the single button.

output