October 2, 2015 Bootstrap Questions And Answers

Twitter Bootstrap Tooltips Example And Demo

Twitter Bootstrap Tooltips Example And Demo : Example with demo and full description.

Twitter Bootstrap Tooltips Example And Demo

Tutorialsplane - Hover on me

Try it »

October 2, 2015 Bootstrap Questions And Answers

Bootstrap modal appearing below background

Bootstrap modal appearing below background : Add the following script to increase the z-index of the modal.

Bootstrap modal appearing below background

Add the following css to increase the z-index of bootstrap modal

October 2, 2015 Bootstrap Questions And Answers

Change the background color in bootstrap modal

Change the background color in a twitter bootstrap modal : You can change bootstrap modal’s background color as below

Change the background color in bootstrap modal

Add the following css to change the background color of bootstrap modal

Change the background color in bootstrap modal : Example

Try it »

Output :

Change the background color in bootstrap modal

October 2, 2015 Bootstrap Questions And Answers

Disable bootstrap modal window from closing

Disable bootstrap modal window from closing : You can disable the bootstrap modal from closing.

Disable bootstrap modal window from closing Syntax

Add the following jquery to make your bootstrap modal disable from closing.

$(modal-selector).modal({
  backdrop: 'static',
  keyboard: true
})

Where modal-selector is id of your modal. You can also disable keyboard closing by setting keyboard parameter as false.

$(modal-selector).modal({
  backdrop: 'static',
  keyboard: false
})

Disable bootstrap modal window from closing : Example

$("#tutorialsplaneModal").modal({
  backdrop: 'static',
  keyboard: true
})

Try it »

August 18, 2015 Bootstrap Questions And Answers

Bootstrap modal makes scrollbar disappear after closing

Bootstrap modal makes scrollbar disappear after closing : Bootstrap modal makes scrollbar disappear when you are closing modal with jquery or javascript.

Bootstrap modal makes scrollbar disappear after closing

You Can Fix it by adding the following lines of code .

function closeMyModal(){
    $('.modal.in').modal('hide'); 
    $(".modal-backdrop").hide();
    $('body').removeClass('modal-open');
}

It will close the modal in proper way.

June 13, 2015 Bootstrap

Bootstrap Button Groups

Bootstrap Button Groups : You can create a group of buttons (ie. in single line) in bootstrap.

.btn-group is used to create button group in bootstrap.

Basic Example of Bootstrap Button Groups is :

Bootstrap Button Group : Example

Try it »

Bootstrap Button Groups : Justified

.btn-group-justified class is used to create justified bootstrap button group.

Bootstrap Button Groups : Justified Example


 
  Button One
  Button Two
  Button Three

Try it »

Bootstrap Button Groups : Vertical

.btn-group-vertical class is used to create vertical bootstrap button groups.

Bootstrap Button Group : Vertical Example

Try it »

Bootstrap Button Groups : Nested

Simple example of nested bootstrap button group is as :

Bootstrap Button Group : Nested Example


  
  
    
    
      Dropdown Button One
      Dropdown Button Two

Try it »

June 13, 2015 Bootstrap

Bootstrap Progress Bar

Bootstrap Progress Bar : Is used to show user’s task progress.
Different types of progress bars are available in the Bootstrap.

A simple and default Progress bar is :

Bootstrap progress bar basic example demo

Bootstrap Progress Bar: Basic Example


  Basic Progress Bar
  
    
      60% Completed

Try it »

Progress Bar Colored :

Following are the classes used for the colored Progress Bar.
.progress-bar-info
.progress-bar-warning
.progress-bar-success
.progress-bar-danger

Bootstrap colored progress bar example

Progress Bar Colored : Example


  Colored Progress Bar
  
    
      60% Completed - [Info bar]
  
  

   
    
      60% Completed - [warning]
  
  

  
    
      60% Completed - [success]
  
  

   
    
      60% Completed - [danger]

Try it »

Bootstrap Progress Bar Striped :

Add the following class for the stripped progress bar.
.progress-bar-striped

Bootstrap stripped progress bar example demo

Bootstrap striped progress bar example demo

Bootstrap Progress Bar: Striped Example


  Colored Progress Bar
  
    
      60% Completed - [Info bar]
  
  

   
    
      60% Completed - [warning]
  
  

  
    
      60% Completed - [success]
  
  

   
    
      60% Completed - [danger]

Try it »

Progress Bar Animated :

Add the following class for the animated progress bar.
.active

Bootstrap animated progress bar example demo

Bootstrap Progress Bar: Animated Example


  Animated Progress Bar
  
    
      60% Completed - [Animated]

Try it »

June 12, 2015 Bootstrap

Bootstrap Scrollspy

Bootstrap Scrollspy : Bootstrap scrollspy is used for navigation. It navigates the users to the different sections of the page.

Bootstrap Scrollspy : Basic Example


        
          Section One
          Section Two
          Section Three
          Section Four
         
              
   
    


  
    
      Section One
       Demo Section
    
  
  
    
      Section Two
       Demo Section
     
  
  
    
      Section Three
       Demo Section
    
  
  
  
    
      Section Four
       Demo Section

Try it »

June 3, 2015 Bootstrap

Bootstrap Modal Plugin

Bootstrap Modal Plugin : Bootstrap Modals are basically dialog box/popup box which are used to provide some additional information or prompt user to perform some action. Bootstrap modals are easy to implement.

Bootstrap Modal Demo And Example

Create Basic Modal

Bootstrap Modal Plugin

Bootstrap Modal Example : Basic

  

    
        
            
                
                Tutorialsplane Modal Demo
            
            
                Here the description starts here........

Try it »

BootStrap Modal Sizes :

There are following bootstrap modal size available .
Note : Class .modal-sm is used for creating small modal.

Bootstrap Modal : Small

  

    
        
            
                
                Tutorialsplane Modal Demo : Small Modal
            
            
                Here the description starts here........

Try it »

Note : Class .modal-lg is used for creating large modal.

Bootstrap Modal : Large

  

    
        
            
                
                Tutorialsplane Modal Demo : Large Modal
            
            
                Here the description starts here........

Try it »

Tag Archives: bootstrap tutorial for beginners

Twitter Bootstrap Tooltips Example And Demo

Twitter Bootstrap Tooltips Example And Demo

Bootstrap modal appearing below background

Bootstrap modal appearing below background

Change the background color in bootstrap modal

Change the background color in bootstrap modal

Change the background color in bootstrap modal : Example

Disable bootstrap modal window from closing

Disable bootstrap modal window from closing Syntax

Disable bootstrap modal window from closing : Example

Bootstrap modal makes scrollbar disappear after closing

Bootstrap modal makes scrollbar disappear after closing

Bootstrap Button Groups

Basic Example of Bootstrap Button Groups is :

Bootstrap Button Group : Example

Bootstrap Button Groups : Justified

Bootstrap Button Groups : Justified Example

Bootstrap Button Groups : Vertical

Bootstrap Button Group : Vertical Example

Bootstrap Button Groups : Nested

Bootstrap Button Group : Nested Example

Bootstrap Progress Bar

Bootstrap Progress Bar: Basic Example

Basic Progress Bar

Progress Bar Colored :

Progress Bar Colored : Example

Colored Progress Bar

Bootstrap Progress Bar Striped :

Bootstrap Progress Bar: Striped Example

Colored Progress Bar

Progress Bar Animated :

Bootstrap Progress Bar: Animated Example

Animated Progress Bar

Bootstrap Scrollspy

Bootstrap Scrollspy : Basic Example

Section One

Section Two

Section Three

Section Four

Bootstrap Modal Plugin

Bootstrap Modal Plugin

Bootstrap Modal Example : Basic

BootStrap Modal Sizes :

Bootstrap Modal : Small

Bootstrap Modal : Large