My code looks like this :
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab heading="Tab1">content 1</tab>
<tab heading="Tab2">content 2</tab>
<tab heading="Tab3">content 3</tab>
</tabset>
</div>
</body>
</html>
This code creates the default tabset as demonstrated by this plunker code :
http://plnkr.co/edit/?p=preview&s=gYWtjBltWXYqhczs
I want my tabset to look like as in this picture with the tab heading at the bottom.
Please guide how do I achieve this?
Found the solution myself after a lot of digging as to what the and tags render into on page load in the browser:
This strip of jquery code will do the job for you :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
var timex = setInterval(function(){
if($(".tab-content").html()){
clearInterval(timex);
$('div.tab-content').insertBefore($('div.tab-content').prev('ul'));
}
},1);
});
</script>