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

Related Posts

Bootstrap Responsive Web Design

Responsive collapsing search filters in Bootstrap 4

by John Avis | March 26, 2018

In responsive design there are times when on a mobile screen you want to hide some options with a button to show them, but on a large screen always show these options.


Bootstrap

Bootstrap 4 fixed navbar that hides until page scrolled up

by John Avis | March 8, 2018

Fixed navbars – that stay at the top of the screen at all times – are common and useful, but sometimes annoying as they can block the top part of the page (sometimes obscuring page anchors).


ASP.NET Web Forms

Nicer localised UpdateProgress’ for your ASP.NET pages with multiple UpdatePanels

by John Avis | February 9, 2018

On an ASP.NET Web Forms page with multiple UpdatePanels it’s nice to give the user some feedback when one of the panels is being updated.

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

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.