Bootstrap Tabs X Demo

Thankful to Krajee!
to get more out of us.

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 4.x tabs markup and Bootstrap 4.x CSS & JS. However, the alternate Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 3.x markup, you need to load instead the Boostrap 3.x CSS & JS on your page.

Tip

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)

Click for Demo

Demonstration of various tab positions and directions (above, below, left, right).

NOTE All the code in the demo examples here use Bootstrap 4.x tabs markup and Bootstrap 4.x CSS & JS. However, the alternate Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 3.x markup, you need to load instead the Boostrap 3.x CSS & JS on your page.

Click for Demo

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 4.x tabs markup and Bootstrap 4.x CSS & JS. However, the alternate Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 3.x markup, you need to load instead the Boostrap 3.x CSS & JS on your page.

Click for Demo

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 4.x tabs markup and Bootstrap 4.x CSS & JS. However, the alternate Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 3.x markup, you need to load instead the Boostrap 3.x CSS & JS on your page.

Click for Demo

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 4.x tabs markup and Bootstrap 4.x CSS & JS. However, the alternate Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 3.x markup, you need to load instead the Boostrap 3.x CSS & JS on your page.

Click for Demo

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 4.x tabs markup and Bootstrap 4.x CSS & JS. However, the alternate Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 3.x markup, you need to load instead the Boostrap 3.x CSS & JS on your page.

Click for Demo

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 4.x tabs markup and Bootstrap 4.x CSS & JS. However, the alternate Bootstrap 3.x markup code is also mentioned for each example. Obviously, when using Bootstrap 3.x markup, you need to load instead the Boostrap 3.x CSS & JS on your page.

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.