Recently, I attempted to implement Bootstrap Dual Listbox for my project after finding it at this link: . However, I encountered an issue where the dual-list box consistently aligned to the left and I struggled to change its alignment. Despite trying to adjust the styling attributes within the 'select' element and linking to a CSS file, none of my attempts were successful.
<body>
<select id="sele" multiple="multiple" size="5" name="listbox" class='demo2 col-md-3' style="text-align:center">
<% for(int i = 0 ; i <50; i++){ %>
<option value="<%=i %>" ><%=i %></option>
<% } %>
</select>
<script>
var demo2 = $('.demo2').bootstrapDualListbox({
nonselectedlistlabel: 'Select',
selectedlistlabel: 'Selected',
preserveselectiononmove: 'moved',
moveonselect: false,
initialfilterfrom: ''
});
</script>
<script src="libraries/jquery-placeholder/jquery.placeholder.js"></script>
<script>
$('input').placeholder();
prettyPrint();
</script>
</body>
The current appearance can be viewed here: (aligned to the left instead of center). How can I go about resolving this issue?
Your assistance is greatly appreciated!