How do I apply bootstrap in asp dropdownlist getting data from an objectdatasource?

How do I apply bootstrap in asp dropdownlist getting data from an objectdatasource?

The old code is running perfectly. Here's the old code

<asp:DropDownList ID="uxLocations" runat="server" 
                  DataSourceID="ObjectDataSource1" DataTextField="Name" DataValueField="ID" 
                  Height="24px" Width="200px" AutoPostBack="True" 
                  onselectedindexchanged="uxLocations_SelectedIndexChanged">
</asp:DropDownList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
                      SelectMethod="GetLocations" 
                      TypeName="Domain.LocationManager">
</asp:ObjectDataSource>

I tried to apply bootstrap but the list is not showing properly, unlike when you hardcode the list using "ul and li" tags, just as shown in http://ift.tt/1G6FijP

Here's what i did: [not good]

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" 
 data-toggle="dropdown">Locations
<span class="caret"></span></button>

<asp:DropDownList ID="uxLocations" runat="server" AutoPostBack="True" 
 CssClass="dropdown-menu" DataSourceID="ObjectDataSource1" 
 DataTextField="Name" DataValueField="ID" Height="24px" Width="200px">
</asp:DropDownList>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" 
    SelectMethod="GetLocations" 
    TypeName="Domain.LocationManager">
</asp:ObjectDataSource>

</div>

Help.