Bootstrap styling for ASP.NET RadioButtonList and CheckBoxList in Horizontal Forms

By · July 13, 2015 · 1 comment

Following on from my last post about improving Bootstrap styling and accessibility for ASP.NET RadioButtonLists and CheckBoxLists, Better styling and accessibility for ASP.NET controls using Bootstrap 3, in this post I offer a solution for styling these controls within Bootstrap horizontal forms.

This example below uses the same CSS changes as my last post, but with a revised HTML structure to suit Bootstrap's form-horizontal classes.

<div class="form-horizontal">
<fieldset class="form-group">
<legend class="col-sm-3 control-label">Label for CheckBoxList1</legend>
<div class="checkbox checkboxlist col-sm-9">
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
<asp:ListItem Text="Option one"></asp:ListItem>
<asp:ListItem Text="Option two"></asp:ListItem>
<asp:ListItem Text="Option three"></asp:ListItem>
</asp:CheckBoxList>
</div>
</fieldset>
<fieldset class="form-group">
<legend class="col-sm-3 control-label">Label for RadioButtonList1</legend>
<div class="radio radiobuttonlist col-sm-9">
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Vertical" RepeatLayout="Flow">
<asp:ListItem Text="Option one"></asp:ListItem>
<asp:ListItem Text="Option two"></asp:ListItem>
<asp:ListItem Text="Option three"></asp:ListItem>
</asp:RadioButtonList>
</div>
</fieldset>
</div>


And here's what this looks like:

After CSS changes

Get the latest posts delivered to your inbox.

Comments (1)

# Posted by FerryY · July 19, 2017

I see you don't monetize your page, don't waste your traffic, you can earn extra bucks every month because your content is good quality. If you want to know what is the best adsense alternative, search in google: murgrabia's tools

Reply

FerryY
Leave a Comment

All comments are moderated and rel="nofollow" is in use. Avatars are sourced from gravatar.com – a globally recognised avatar.

Type the numbers from the picture above

About me
John Avis ...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

profile for John at Stack Overflow, Q&A for professional and enthusiast programmers
Subscribe

Get the latest posts delivered to your inbox. *