Popover positions in Bootstrap

How to change the Bootstrap popover positions?

Popover positions

We can place the popover positions to left, right, top, bottom by using data-placement property

<head> 
<script type="text/javascript">
         $(document).ready(function () {
             $(".popover-bottom").popover({
                 placement: 'bottom'
             });
             $(".popover-top").popover({
                 placement: 'top'
             });
             $(".popover-left").popover({
                 placement: 'left'
             });
             $(".popover-right").popover({
                 placement: 'right'
             });
         });
    </script>
</head>
<body>
    <h2>Popover with hover</h2>
    <div>
        <ul class="list-inline">
            <li><a href="#" class="btn btn-warning popover-bottom" data-toggle="popover"  title="Forums" data-content="Resolved Posts">DotNetFunda</a></li>
            <li><a href="#" class="btn btn-danger popover-top" data-toggle="popover" title="Step by step" data-content="Tutorials">TechFunda</a></li>
            <li><a href="#" class="btn btn-success popover-left" data-toggle="popover" title="Step by step" data-content="Tutorials">ITFunda</a></li>
            <li><a href="#" class="btn btn-info popover-right" data-toggle="popover" title="Step by step" data-content="Tutorials">KidsFunda</a></li>
        </ul>
    </div>

In the above code snippet we have defined the positions of the popover

In the body section of the HTML page we have value of class attribute as list-inline in the ul element and we have anchor tag with data-toggle as popover , data-content defines content in the popover, title defines the title of the popover with buttons and class attribute