Search code examples
htmlcssasp.nettwitter-bootstrapbootstrap-grid

apply bootstrap grid to RadioButtonList's ListItem

I want to apply bootstrap grid to the RadioButtonList's ListItem:

 Col-md-12
+-------------------------------------------------------------------+
|  Col-md-2      Col-md-2      Col-md-2      Col-md-2     Col-md-2  |
| +--------+    +--------+    +--------+    +--------+   +--------+ |
| | O rb1  |    | O rb2  |    | O rb3  |    | O rb4  |   | O rb5  | |
| +--------+    +--------+    +--------+    +--------+   +--------+ |
+-------------------------------------------------------------------+

My RadioButtonList is:

<div class="col-md-12">
    <asp:RadioButtonList ID="rblCleanliness" RepeatDirection="Horizontal" runat="server">
        <asp:ListItem Value="1">rb1</asp:ListItem>
        <asp:ListItem Value="2">rb2</asp:ListItem>
        <asp:ListItem Value="3">rb3</asp:ListItem>
        <asp:ListItem Value="4">rb4</asp:ListItem>
        <asp:ListItem Value="5">rb5</asp:ListItem>
    </asp:RadioButtonList>
</div>

How I can apply col-md-2 to the each ListItem of RadioButtonList?

<div class="col-md-2">
    <asp:ListItem Value="1">rb1</asp:ListItem>
</div>

Updated:

The results that I'm looking for:

enter image description here

Solution

  • I have used Col-md-12 and Col-md-2 as like this:

    <asp:RadioButtonList ID="rblCleanliness" CssClass="col-md-12" 
    RepeatDirection="Horizontal" runat="server">
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
    <asp:ListItem class="col-md-2 text-center" Value=""> </asp:ListItem>
</asp:RadioButtonList>