Demonstration and usage examples for the Bootstrap Tabs Extended plugin with ability to align tabs in multiple ways, add borders, rotated titles, load tab content via ajax, and more.
NOTE
All the code in the demo examples here use Bootstrap 5.x tabs markup and Bootstrap 5.x CSS & JS. However, the alternate Bootstrap 4.x & Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 4.x or 3.x markup, you need to load the Boostrap 4.x or 3.x CSS & JS on your page respectively instead of Bootstrap 5.x assets. Note that the CSS style file bootstrap-tabs-x-bs4.css must be loaded on page for Bootstrap 5.x and 4.x versions, while bootstrap-tabs-x.css should be loaded when using with Bootstrap 3.x version.
Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)
Demonstration of various tab positions and directions (above, below, left, right).
NOTE
All the code in the demo examples here use Bootstrap 5.x tabs markup and Bootstrap 5.x CSS & JS. However, the alternate Bootstrap 4.x & Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 4.x or 3.x markup, you need to load the Boostrap 4.x or 3.x CSS & JS on your page respectively instead of Bootstrap 5.x assets. Note that the CSS style file bootstrap-tabs-x-bs4.css must be loaded on page for Bootstrap 5.x and 4.x versions, while bootstrap-tabs-x.css should be loaded when using with Bootstrap 3.x version.
Demonstration of boxed tabs within a contained border (applicable for all positions: above, below, left, right).
NOTE
All the code in the demo examples here use Bootstrap 5.x tabs markup and Bootstrap 5.x CSS & JS. However, the alternate Bootstrap 4.x & Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 4.x or 3.x markup, you need to load the Boostrap 4.x or 3.x CSS & JS on your page respectively instead of Bootstrap 5.x assets. Note that the CSS style file bootstrap-tabs-x-bs4.css must be loaded on page for Bootstrap 5.x and 4.x versions, while bootstrap-tabs-x.css should be loaded when using with Bootstrap 3.x version.
Demonstration of aligning tabs with respect to the tab panes. This applicable for above and below positions. Tabs can be aligned left (default), center, or right.
NOTE
All the code in the demo examples here use Bootstrap 5.x tabs markup and Bootstrap 5.x CSS & JS. However, the alternate Bootstrap 4.x & Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 4.x or 3.x markup, you need to load the Boostrap 4.x or 3.x CSS & JS on your page respectively instead of Bootstrap 5.x assets. Note that the CSS style file bootstrap-tabs-x-bs4.css must be loaded on page for Bootstrap 5.x and 4.x versions, while bootstrap-tabs-x.css should be loaded when using with Bootstrap 3.x version.
Demonstration of fixing tabs to a specified height. Plugin provides four different height sizes: xs (extra small), sm (small), md (medium) and lg (large) tab height sizes.
NOTE
All the code in the demo examples here use Bootstrap 5.x tabs markup and Bootstrap 5.x CSS & JS. However, the alternate Bootstrap 4.x & Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 4.x or 3.x markup, you need to load the Boostrap 4.x or 3.x CSS & JS on your page respectively instead of Bootstrap 5.x assets. Note that the CSS style file bootstrap-tabs-x-bs4.css must be loaded on page for Bootstrap 5.x and 4.x versions, while bootstrap-tabs-x.css should be loaded when using with Bootstrap 3.x version.
Demonstration of displaying rotated sideways oriented tab headers for left or right tab positions.
NOTE
All the code in the demo examples here use Bootstrap 5.x tabs markup and Bootstrap 5.x CSS & JS. However, the alternate Bootstrap 4.x & Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 4.x or 3.x markup, you need to load the Boostrap 4.x or 3.x CSS & JS on your page respectively instead of Bootstrap 5.x assets. Note that the CSS style file bootstrap-tabs-x-bs4.css must be loaded on page for Bootstrap 5.x and 4.x versions, while bootstrap-tabs-x.css should be loaded when using with Bootstrap 3.x version.
Demonstration of setting tabs to load tab pane content via ajax using a specified data-url.
NOTE
All the code in the demo examples here use Bootstrap 5.x tabs markup and Bootstrap 5.x CSS & JS. However, the alternate Bootstrap 4.x & Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 4.x or 3.x markup, you need to load the Boostrap 4.x or 3.x CSS & JS on your page respectively instead of Bootstrap 5.x assets. Note that the CSS style file bootstrap-tabs-x-bs4.css must be loaded on page for Bootstrap 5.x and 4.x versions, while bootstrap-tabs-x.css should be loaded when using with Bootstrap 3.x version.
Comments & Discussion
Note
You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.
The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.