Bootstrap checkbox-inline and radio-inline with ASP.NET CheckBoxList and RadioButtonList controls

By · June 20, 2016 · 0 comments

Although you can easily create inline checkboxes and radio buttons using ASP.NET CheckBoxes and RadioButtons using Bootstrap's checkbox-inline and radio-inline classes, it's not so easy with ASP.NET CheckBoxList and RadioButtonList controls.

There's probably several ways of emulating the Bootstrap inline styling using these ASP.NET controls, this is how I have been doing it.

Additional CSS classes:

.checkboxlist-inline li, .radiobuttonlist-inline li
{
display:inline-block;
}

.checkboxlist-inline, .radiobuttonlist-inline
{
margin-left: 20px;
}

.checkboxlist-inline label, .radiobuttonlist-inline label
{
padding-left:0;
padding-right:30px;
}


Then your ASP.NET controls will need some CSS classes applied, and some special attributes:

<asp:CheckBoxList ID="CheckBoxList1" runat="server" CssClass="list-unstyled checkbox checkboxlist-inline" RepeatDirection="Vertical" RepeatLayout="UnorderedList"></asp:CheckBoxList>

<asp:RadioButtonList ID="RadioButtonList1" runat="server" CssClass="list-unstyled radio radiobuttonlist-inline" RepeatDirection="Vertical" RepeatLayout="UnorderedList"></asp:RadioButtonList>


As you can see, I use the UnorderdedList layout and then change the styling of the LI elements to inline-blocks. By using the Bootstrap checkbox/radio classes combined with the list-unstyled we get a result very similar to the native Bootstrap styling.

Get the latest posts delivered to your inbox.

Comments

There are no comments yet. Be the first to leave a comment!

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. *