Question 250450 in ASP.NET Question posted in
The official documentation can be found here.

Asp.net – Applying bootstrap classes to aspRadioButton group

I have this asp radio button group, which i want to look like bootstrap selectable cards …

        <asp:RadioButtonList ID="origin_channel" runat="server" AutoPostBack="True"RepeatDirection="Horizontal">
                  <asp:ListItem Value="REP">Representatives</asp:ListItem>
                  <asp:ListItem Value="VIP">VVIPs</asp:ListItem>
                  <asp:ListItem Value="OTH">Others</asp:ListItem>
        </asp:RadioButtonList>
Tags:

2

Answers


  1. 0

    Given an ASP.NET RadioButtonList with classes set on the ListItems:

     <asp:RadioButtonList ID="RadioButtonList" runat="server" class="btn-group">
      <asp:ListItem class="btn-check" id="option1" Text="Yes" Value="1" />
      <label class="btn btn-secondary" for="option1">Radio</label>
      
      <asp:ListItem class="btn-check" id="option2" Text="No" Value="0" />
      <label class="btn btn-secondary" for="option2">Radio</label>
 </asp:RadioButtonList>
    Login or Signup to reply.
  2. 0

    To transform your ASP.NET RadioButtonList component into a visually appealing Bootstrap-inspired card selection interface, you can leverage Bootstrap classes alongside a touch of personalized CSS. Here’s a guide on accomplishing this:

    Include Bootstrap CSS and JavaScript in your page if you haven’t already:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

    Modify your RadioButtonList control to generate Bootstrap-style selectable cards:

    <div class="btn-group" data-toggle="buttons">
    <asp:RadioButton ID="REP" runat="server" Text="Representatives" CssClass="btn btn-outline-primary" GroupName="channel" />
    <asp:RadioButton ID="VIP" runat="server" Text="VVIPs" CssClass="btn btn-outline-primary" GroupName="channel" />
    <asp:RadioButton ID="OTH" runat="server" Text="Others" CssClass="btn btn-outline-primary" GroupName="channel" />
</div>

    We’ve enclosed your RadioButtonList control within a Bootstrap btn-group container, leveraging Bootstrap’s button styles (btn and btn-outline-primary) to give each radio button the appearance of a selectable card. We’ve also configured the GroupName property to enforce single selection within the group.

    This approach transforms your radio buttons into stylish Bootstrap-selectable cards with a primary outline design. You have the flexibility to further refine the styling by employing various Bootstrap classes and applying custom CSS as required.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search