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

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: