apply bootstrap grid to RadioButtonList's ListItem

Question

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:

wacKY · Answer 1 · 2017-12-23T18:03:41.763

0

use CSS to display them flex:

#rblCleanliness{
    background-color:green; 
    border:  solid 2px black;
    height: 400px;
    width:400px;
    display: flex;
}
.col-md-12{
    width: 1000px;
    height: 400px;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.box{
    border:dashed 2px black;
    display: flex;
    flex-grow: 1;
}

and your html should have class like

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

and for bootstrap version will

#rblCleanliness{
    background-color:white; 
    border:  solid 2px black;
    height: 400px;
    width:400px;
    display:flex;
    justify-content: space-around;

}

.col-md-12{
    width: 1000px;
    height: 400px;

}

.box{
    border:dashed 2px black;
}

And Bootstrap html will be :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="row col-md-12">
    <asp:RadioButtonList ID="rblCleanliness" RepeatDirection="Horizontal" runat="server">
        <asp:ListItem Value="1" class="box col-md-2 1">rb1</asp:ListItem>
        <asp:ListItem Value="2" class="box col-md-2 2">rb2</asp:ListItem>
        <asp:ListItem Value="3" class="box col-md-2 3">rb3</asp:ListItem>
        <asp:ListItem Value="4" class="box col-md-2 4">rb4</asp:ListItem>
        <asp:ListItem Value="5" class="box col-md-2 5">rb5</asp:ListItem>
    </asp:RadioButtonList>
</div>
</body>

edited Dec 23 '17 at 18:03

answered Dec 23 '17 at 17:41

wacKY

36
7

after adding your css my whole design of page disturbed. – Dec 23 '17 at 17:45
if you gonna start build display:flex content you have to add flex to all divs. – wacKY Dec 23 '17 at 17:49
i'm using bootstap and it changed my all structure. – Dec 23 '17 at 17:50
https://codepen.io/wacKYjoker/pen/wpoGYz this is pure css style, using bootstrap would have to use col-md-2 on each class="box" like class="col-md-2 box" – wacKY Dec 23 '17 at 17:55
I want to use bootstrap built class `col-md-2` to the listitem not custom. – Dec 23 '17 at 18:10
i have edited my post and here's 'col-md-2' version of html – wacKY Dec 23 '17 at 18:11
https://codepen.io/wacKYjoker/pen/PEbNvz this is link of Bootstrap version col-md-2 – wacKY Dec 23 '17 at 18:14
I would assume that you also need to add the row class to the RadioButtonList (which should add it to the generated ul element). – Tieson T. Dec 24 '17 at 05:52
@wacKY Thanks for your answer I've solved it as like my answer. +1 Voted! – Dec 24 '17 at 08:41

score 0 · Accepted Answer · answered Dec 24 '17 at 08:39

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>

apply bootstrap grid to RadioButtonList's ListItem

Updated:

2 Answers2