Bootstrap popover style issue - css

Question

Im make bootstrap popover, i had some issue , ly list are inline , i dont want to show inline list,look my 2 images you can understand it
FIDDLE my code part is its not working, but fiddle is working what happen?
image 01- i need like this
actually my current working sample
html
<div class="form-group">
<a href="#" data-toggle="popover" data-placement="bottom" data-toggle="popover" title="Bill Category">
<input class="form-control input-sm" id="category" type="text" placeholder="Select category">
</a>
</div>
<div class="form-group">
<input class="form-control input-sm" id="Description" type="text" placeholder="Description">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Date" type="text" placeholder="Date">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Amount" type="text" placeholder="Amount">
</div>
<div class="form-group">
<input class="form-control input-sm" id="Paidby" type="text" placeholder="Paid by">
</div>
<title>Bootstrap Example</title>
<!-- loaded popover content -->
<div id="popover-content" style="display: none">
<ul class="list-group custom-popover">
<li class="list-group-item">Airport Pickup</li>
<li class="list-group-item">Food and Beverage</li>
<li class="list-group-item">Yoga Class</li>
</ul>
</div>
css
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1060;
display: none;
max-width: 276px;
padding: 1px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
font-style: normal;
font-weight: normal;
line-height: 1.42857143;
text-align: left;
text-align: start;
text-decoration: none;
text-shadow: none;
text-transform: none;
letter-spacing: normal;
word-break: normal;
word-spacing: normal;
word-wrap: normal;
white-space: normal;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
line-break: auto;
}
.popover-title {
text-align: center;
}
.custom-popover li {
border: none!important;
text-align: center;
}
.custom-popover li:nth-child(2) {
border-top: 1px solid #ccc!important;
}
.custom-popover li:last-child {
border-top: 1px solid #ccc!important;
}
js
$(document).ready(function() {
$('[data-toggle="popover"]').popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
});
how to make like this image 01, please help me to fix this

Answer 1

Line height should be given in px. Try also specify width for li elementy because by default they are as small as they can so ale three of them fit in one line