Tab

Bootstrap 4 Tab with Material Design UI

Tab is an HTML component that makes exploring and switching between different views easier.

Bootstrap 4 Tabs Propeller Tabs Equal Width Tabs Tabs with Icons and Labels Tabs with Icons and Bottom Labels Tabs with Background Scrollable Tabs Configuration Options Methods Events

Bootstrap 4 Tabs

Bootstrap 4 Tabs add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

                        
 
                            
                    
 
                    
                    
                    

                        
                        
                        
Propeller Tabs

                        
Propeller Tabs consist of Bootstrap 4 HTML structure with Propeller customized classes and jQuery based on material design standards. Add .pmd-tabs to nav tag for applying Propeller Theme to the tabs.

                        
                        
                         
                        
                        
 
                            

                                
                            

                            

                                

                                    
A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

                                    
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

                                    
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

                                

                            

                        
 
                                    
                        
                        

                            

                        
 
                    	
                    
 
                    
                    
                    

                        
                        
                        
Equal Width Tabs

                        
Equal Width Tabs have same width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. Add .nav-fill to the list to create fixed tabs.

                        
                        
                        
                        
                        

                          

                              
                          

                          

                              

                                
A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

                                
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

                                
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

                              

                          

                        
 
                        
                        
                        

                            

                        
  
                        
                    
 

                    
                    

                        
                        
                        
Tabs with Icons and Labels

                        
To create Tabs with icons and labels, add the <i> tag for the icon with a right margin utlitiy class to maintain the spacing between the icon and the label inside the <a> tag.

                        
                        
                        
 
                            

                                
                            

                            

                                

                                    
A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

                                    
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

                                    
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

                                

                            

                        

                        

                        
                        

                            

                        

                    	
                    
 

                    
                    

                        
                        
                        
Tabs with Icons and Bottom Labels

                        
Add class .pmd-tabs-icons-bottom-label next to .pmd-tabs to create tabs with icons and bottom labels.

                        
                        
                        
 
                            

                                
                            

                            

                                

                                    
A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

                                    
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

                                    
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

                                

                            

                        

                        
                                    
                        
                        

                            

                        

                        
                        
                    
 
                    
                    
                    

                        
                        
                        
Tabs with Background

                        
Add .pmd-tabs-dark class and .bg-* class to add the background as per your requirement.

                        
                        
                        
					    
                        
 
                            

                                
                            

                            

                                

                                    
A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

                                    
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

                                    
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

                                

                            

                        
 
                        
                        
                        

                            

                        
  
                    	
                    
 
                    
                    
                    

                        
                        
                        
Scrollable Tabs

                        
Scrollable tabs display a subset of tabs at any given moment. They can contain longer tab labels and a larger number of tabs than fixed tabs. To create scrollable tabs, add attribute scroll="true" to the div with the class .pmd-tabs.

                        
                        
                        
                        
                        
 
                            

                                
                            

                            

                                

                                    
A tab provides the affordance for displaying grouped content. A tab label succinctly describes the tab’s associated grouping of content.

                                    
Fixed tabs have equal width, calculated either as the view width divided by the number of tabs, or based on the widest tab label. To navigate between fixed tabs, touch the tab or swipe the content area left or right.

                                    
To navigate between scrollable tabs, touch the tab or swipe the content area left or right. To scroll the tabs without navigating, swipe the tabs left or right.

                                

                            

                        
 
                        
                        
                        

                            

                        
 
                    	
                    
 
                    
                                
                    

                        
Configuration Options

                        
The Propeller CSS classes apply various predefined visual enhancements to the tabs. The table lists the available classes and their effects.

                        
                        
                        

                            
                                

                                    Propeller Class
                                    Effect
                                    Remark
                                

                            
                            
                                

                                    .pmd-tabs
                                    Add Propeller css to the tabs.
                                    Required
                                

                                

                                    .pmd-tabs-dark
                                    Add this class with the bg-* utility class to apply background color.
                                    Optional
                                

                                

                                    .pmd-tabs-icons-bottom-label
                                    Add this class with the .pmd-tabs class to move the labels below the icons.
                                    Optional
                                

                            
                        

                        
                        
                        
                        

                            
                                

                                    Propeller Attributes
                                    Effect
                                    Value
                                

                            
                            
                                

                                    scroll
                                    Add this attributes while creating scrollable tabs.
                                    true, false
                                

                            
                        

                        
                    
         
                    
                    

                        
jQuery plugin

                        
Call the jQuery plugin to initialize the tab while fetching the data dynamically.


                        

                            

                        


                    
 
                    
                    		
                    

                        
Methods

                        
See here for more documentation on this.

                        
                        
                        

                                
                                    

                                        Method
                                        Description
                                    

                                
                                
                                    

                                        $().tab
                                        Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.
                                    

                                    

                                        $().tab(‘show’)
                                        Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden.
                                    

                                    

                                        $().tab(‘dispose’)
                                        Destroys an element’s tab.
                                    

                                
                            

                        
                        
                        

                            

                        

                    

                    
                    		
                    

                        
Events

                        
See here for more documentation on this.

                        
                        
                        

                                
                                    

                                        Event Type
                                        Description
                                    

                                
                                
                                    

                                        show.bs.tab
                                        This event fires on tab show, but before the new tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
                                    

                                    

                                        shown.bs.tab
                                        This event fires on tab show after a tab has been shown. Use event.target and event.relatedTarget to target the active tab and the previous active tab (if available) respectively.
                                    

                                    

                                        hide.bs.tab
                                        This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
                                    

                                    

                                        hidden.bs.tab
                                        This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively.
                                    

                                
                            

                        
                        
                        

                            

                        

                    

                    
				
 
                
                
                

					

                        Bootstrap 4 Tabs
                        Propeller Tabs
                        Equal Width Tabs
                        Tabs with Icons and Labels
                        Tabs with Icons and Bottom Labels
                        Tabs with Background
                        Scrollable Tabs
                        Configuration Options
                        Methods
                        Events