4 Demos of Bootstrap Tabs with Different Styles and Placements

Styling tabs by bootstrap-tabs-x

In this core Bootstrap tabs tutorial, I showed how to create simple tabs for presenting the information. The tutorial included simple demos as well.

In this post, I am going to share an awesome plug-in for creating the tabs in Bootstrap with extended options. By using the bootstrap-tabs-x plug-in (jQuery based), you may place the tabs in the different directions like the top, bottom, left or right.

You may present the tabs content with or without the border while the tabs may also be placed sideways. See the demos and code below for learning how to use this tabs plug-in.

Demo1 Demo2 Demo3
Developer page Download plug-in

How to install and use this tabs plug-in?

You may install the bootstrap-tabs-x plug-in via Bower or Composer as follows:

By Bower:

bower install bootstrap-tabs-x

By Composer:

$ php composer.phar require kartik-v/bootstrap-tabs-x “@dev”

Manually

For manually installing the plug-in, download it from the above link and get the bootstrap-tabs-x.css and bootstrap-tabs-x.js files from the package. Place both files in your project directory and refer both in web page(s) along with jQuery and Bootstrap:

    <link href=”http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css” rel=”stylesheet”>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>

<link href=”css/bootstrap-tabs-x/bootstrap-tabs-x.css” media=”all” rel=”stylesheet” type=”text/css”/>

<script src=”http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js” type=”text/javascript”></script>

<script src=”js/bootstrap-tabs-x/bootstrap-tabs-x.js” type=”text/javascript”></script>

See the demos below for learning how to use the markup and data attributes for creating tabs with different styles and alignments.

A demo of Bootstrap tabs with above and below placements

In this demo of tabs in Bootstrap, the tabs are positioned towards the top and bottom. The content of each tab is without the borders. The third tab is a dropdown; as you press this, it will open two options to select from. Have a look:

Bootstrap tabs bottom

See online demo and code

The markup for creating the tabs on above position:

 

See the demo page for the below position tabs as well.

A demo of tabs towards the left and right

In this example, the tabs are placed towards the left and right. Just like the above example, the tab’s content is without the borders:

Bootstrap tabs left

See online demo and code

Tabs with bordered content example

For this demo, tabs in different directions are created just like above examples. However, the content is bordered for all the directions. Have a look:

Bootstrap tabs border

See online demo and code

A demo of sideways tabs with bordered content

For this example, the tabs are created with borders and the placement is sideways. That is, the tabs are placed sideways to the left and right as shown in the demo:

Bootstrap tabs sideways

See online demo and code

The code for left sideway tabs:

 

For learning more about this awesome tabs plug-in, visit the developer page.