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

John Avis by | June 20, 2016 | Bootstrap ASP.NET Web Forms

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.
Update: This applies to Bootstrap 3. See update at end for Bootstrap 4.

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.

Update for Bootstrap 4:

Here are the CSS changes for Bootstrap 4.x.

.checkboxlist-inline li, .radiobuttonlist-inline li
{
display: inline-flex;

align-items: center;
padding-left: 0;
margin-right: .75rem;

position: relative;
}

.checkboxlist-inline li input, .radiobuttonlist-inline li input
{
position: static;
margin-top: 0;
margin-right: .3125rem;
margin-left: 0;
}

.checkboxlist-inline li label, .radiobuttonlist-inline li label {
margin-bottom: 0;
}


And here is how your RadioButtonList should be marked up:

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

Related Posts

ASP.NET Web Forms Bootstrap

More on Bootstrap 4 modals in ASP.NET Web Forms applications using UpdatePanels

by John Avis | April 9, 2019

In this, my third post on this topic, I go over the methods I am using now and the problems I have encountered and overcome.


ASP.NET Web Forms Classic ASP

Custom error pages for ASP.NET Web Forms and Classic ASP in IIS 7 and 8.5

by John Avis | February 20, 2019

I was recently doing some work on a website which has a mixture of older Classic ASP pages and ASP.NET Web Forms pages and ran into problems with custom error pages.


Bootstrap

Sample Bootstrap 4 template for a search orientated two row navbar

by John Avis | January 16, 2019

This sample lends itself to an ecommerce website.

Comments

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

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP Youtube

About me

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

Subscribe

Get the latest posts delivered to your inbox.