Change layout of a radioButtonList / checkBoxList WebForms to be compatible with Bootstrap

In Asp.Net WebForms the controls generate an output in html controlled by the Asp.Net itself, as follows:

the asp.net tag:

<asp:CheckBoxList id="check1" AutoPostBack="True" TextAlign="Right" OnSelectedIndexChanged="Check" runat="server">
    <asp:ListItem>Item 1</asp:ListItem>
    <asp:ListItem>Item 2</asp:ListItem>
</asp:CheckBoxList>

Generate an output in html from:

<table id="check1">
    <tr>
        <td><input id="check1_0" type="checkbox" name="check1$0" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;check1$0\&#39;,\&#39;\&#39;)&#39;, 0)" value="Item 1" /><label for="check1_0">Item 1</label></td>
    </tr><tr>
        <td><input id="check1_1" type="checkbox" name="check1$1" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;check1$1\&#39;,\&#39;\&#39;)&#39;, 0)" value="Item 2" /><label for="check1_1">Item 2</label></td>
    </tr>
</table>

In every WebControl control it is possible to define a Css through the property CssClass="string", for example:

<asp:TextBox id="TextBox1" ForeColor="Red" CssClass="minhaClassCSS" />

output:

<input type=text class="minhaClassCSS" style="ForeColor:red">

Unfortunately, it is not easy to know how each WebControl control will be generated in HTML, that is, WebForms makes it easier for the programmer to build the layout but takes away the power to manipulate it. This is a great advantage of ASP.NET MVC the power back hand of the programmer but it is now your responsibility to write a well done HTML.

If you use Twitter-Bootstrap with WebForms there is no easy way, you will need to create the class in your css similar to the one you want to use Bootstrap and hope that the output of your controls are compatible.

Source: MSDN

Just follow the recommendation of the Bootstrap site itself, adding the classes in each Tag. For Forms, the link is as follows:

link

I will use version 3.1.1 as an example (most current version when this response was written).

Usually the following pattern is used:

<div class="form-group">
    <label for="exemplo">Exemplo</label>
    <input type="text" class="form-control" id="exemplo" placeholder="Exemplo">
</div>

See section CheckBoxes and Radios . An example looks something like this:

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>

As I do not know what your form looks like, it is best to read the examples and change the% s of% s according to your needs.