Styling Radio Buttons and Links in Horizontal Layout Using Bootstrap

Encountering an issue in Bootstrap while attempting to incorporate custom radio buttons and a hyperlink in the same row. It seems that either the hyperlink functions OR the data-toggle feature for radio buttons works, but not both simultaneously, especially within the standard col structure. There may be an error in my implementation, but I am unable to identify it.

Issue with Radio Buttons Functioning: The radio buttons work correctly, but clicking on the hyperlink does not trigger any action (remains on the same page).

<div class="container">
            <div class="row align-content-center">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center"><h4>Column Two</h4></div>
                <div class="col text-center"><h4>Column Three</h4></div>
                <div class="col text-center"><h4>Column Four</h4></div>
            </div>

            <div class="row align-content-center btn-group btn-group-toggle" data-toggle="buttons">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option1" value="1" autocomplete="off" />
                        Option One
                    </label>
                </div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option2" value="2" autocomplete="off" />
                        Option Two
                    </label>
                </div>
                <div class="col text-center">
                    <a asp-area="" asp-controller="Home" asp-action="Index">
                        <img src="~/img/home.png" alt="Home Page" title="Home Page" />
                    </a>
                </div>
            </div>
        </div>

Issue with Hyperlink Functionality: The hyperlink works fine, but the radio buttons do not stay selected after clicking.

<div class="container">
            <div class="row align-content-center">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center"><h4>Column Two</h4></div>
                <div class="col text-center"><h4>Column Three</h4></div>
                <div class="col text-center"><h4>Column Four</h4></div>
            </div>

            <div class="row align-content-center">
                <div class="col text-center d-none d-md-block"><h4>Column One</h4></div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option1" value="1" autocomplete="off" />
                        Option One
                    </label>
                </div>
                <div class="col text-center">
                    <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option2" value="2" autocomplete="off" />
                        Option Two
                    </label>
                </div>
                <div class="col text-center">
                    <a asp-area="" asp-controller="Home" asp-action="Index">
                        <img src="~/img/home.png" alt="Home Page" title="Home Page" />
                    </a>
                </div>
            </div>
        </div>

The issue lies in the div with the row containing "btn-group btn-group-toggle" data-toggle="buttons."

Another method attempted was to include a div with the data-toggle specifically around the radio buttons, which allowed the hyperlink to function but altered the layout and behavior of the radio buttons as a side effect.

cssbootstrap-4

Answer №1

The issue with the radio buttons not being evenly distributed in the previous code is due to the display:inline-flex property of the btn-group class. Changing this to display:flex will resolve the problem...

See the updated code snippet below:

.btn-group {
  display: flex !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


<div class="container">
  <div class="row align-content-center">
    <div class="col text-center d-none d-md-block">
      <h4>Column One</h4>
    </div>
    <div class="col text-center">
      <h4>Column Two</h4>
    </div>
    <div class="col text-center">
      <h4>Column Three</h4>
    </div>
    <div class="col text-center">
      <h4>Column Four</h4>
    </div>
  </div>

  <div class="row align-content-center btn-group btn-group-toggle myToggleClass" data-toggle="buttons">
    <div class="col text-center d-none d-md-block">
      <h4>Column One</h4>
    </div>
    <div class="col text-center">
      <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option1" value="1" autocomplete="off" />
                        Option One
                    </label>
    </div>
    <div class="col text-center">
      <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option2" value="2" autocomplete="off" />
                        Option Two
                    </label>
    </div>
    <div class="col text-center">
      <a asp-area="" asp-controller="Home" asp-action="Index">
        <img src="~/img/home.png" alt="Home Page" title="Home Page" />
      </a>
    </div>
  </div>

  <div class="row align-content-center btn-group btn-group-toggle" data-toggle="buttons">
    <div class="col text-center d-none d-md-block">
      <h4>Column One</h4>
    </div>
    <div class="col text-center">
      <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option1" value="1" autocomplete="off" />
                        Option One
                    </label>
    </div>
    <div class="col text-center">
      <label class="btn btn-outline-primary">
                        <input type="radio" style="visibility:hidden" name="options" id="option2" value="2" autocomplete="off" />
                        Option Two
                    </label>
    </div>
    <div class="col text-center">
      <a asp-area="" asp-controller="Home" asp-action="Index">
        <img src="~/img/home.png" alt="Home Page" title="Home Page" />
      </a>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Top method for independently scrolling overlapping elements in both the x and y directions

Sorry if this is repeating information. I have a structure of nested divs like this: -container -row In order to enable scrolling without the default scrollbar appearing, each container and row has an additional container. My goal is to be able to scrol ...

javascripthtmlcssdom-eventsinline-styles

Having difficulty with adding a floating button to a Django template

I have been attempting to create a floating button similar to the one demonstrated in this video. Unfortunately, I am encountering difficulties in replicating the same effect while trying to incorporate it into one of my Django templates. Below is the HTM ...

htmlcssdjango

In ASP.NET MVC, use CSS styling specifically for Partial Views by encapsulating the styles within a `<style scoped>` tag

A new HTML attribute has emerged, known as scoped, however, it is currently only supported by Firefox. This attribute allows you to declare internal styles solely for the parent element. I am curious if it is feasible to replicate this functionality in AS ...

asp.net-mvchtmlcssasp.net-mvc-5

Dynamic font sizing in CSS allows text on a webpage to

I am working on creating a dynamic screen using AngularJS. Within this screen, there are objects with a specific size: .item { margin: auto; margin-bottom: 10px; width: 11vw; height: 11vw; text-overflow: ellipsis; overflow: hidden; } These i ...

javascripthtmlcssangularjsionic-framework

Using colored circles in ASP Dropdownlist ListItems (without jQuery): A step-by-step guide

Objective: To create a Dropdown list that displays a green circle if someone's Availability is True, and a red circle if someone's Availability is False. Note: The task needs to be accomplished without the use of jQuery, as it is restricted in t ...

c#htmlcssasp.netdrop-down-menu

Div element remains fixed in width while zooming in

I'm encountering an issue with a centered div, where the width is set to 50% and the max-width is set to 100%. When I zoom in, the width remains constant but the height increases. Despite setting the max-width to 100%, why does this occur? And most im ...

htmlcss

problem with arranging photos and captions

When viewing this page in a narrow browser window, an issue arises with how the photo captions are displayed at the bottom of the page. It's evident that the caption extends past the right edge of the photo. My preference would be for the photo and c ...

htmlcss

Tips for implementing a method to switch CSS properties of a main container by using a checkbox within its child element in a Svelte component

It took me a while to figure this out, but I still feel like my implementation is not ideal. I'm confused as to why things break when I remove the checkedActivities.has(activity) ? "checked" : "unchecked", because I thought TypeScr ...

htmlcsstypescriptsvelte

Aligning two divs both horizontally and vertically within two adjacent columns each with a width of 50%

Struggling to align two divs both vertically and horizontally within their respective parent containers that are placed side by side with 50% width and 100% height? Check out my solution on Codepen for reference. View Codepen Example *** HTML *** <di ...

htmlcssresponsive-designvertical-alignment

Bootstrap grid button with maximum flexibility

I am currently exploring the intricacies of the bootstrap grid system. My goal is to create a set of buttons that look like this: https://i.sstatic.net/V5meG.png Each button should expand to fill the width and height of its container. However, when a b ...

htmlcssbootstrap-5

Introduction to Grid Layout Using Bootstrap - Rows

Encountering an issue with the vertical alignment of items in the code snippet below when using Bootstrap 4. Initially, the items are stacked vertically, but they align horizontally when either the "row" or "row align-items-start" classes are applied. &l ...

htmlcsstwitter-bootstrapbootstrap-4

The background image does not appear to be displaying correctly on GitHub pages

I've encountered an issue where my svgs are not displaying as background-image or background on GitHub pages, even though they work fine locally. I utilized sass as a preprocessor for css, in case that detail is helpful. If anyone has insights on how ...

csssassgithub-pages

Guide to aligning text to the right using the text-muted class

I'm attempting to align the text-muted class to the right side of the page. I've tried floating it right, pulling it right, but nothing seems to be working. <table class="table table-bordered"> <tbody> <tr> < ...

htmlcssbootstrap-4

Tips for showing text beyond the confines of a <div></div> container

<div class="signup"> <div>Tenxian アカウントに必要な情報</div><br/> </div> <br/><br/><br/><br/><br/><br/> <div align="center">@2009 Tenxian &nbs ...

csshtml

Chrome and Firefox browsers are not supporting HTML simple anchor links

Creating a portfolio page at this link (http://198.96.94.51/v2/) and encountering an issue with the navigationMenu. When rapidly clicking on the links on the side, they do not redirect to the correct anchor point (some don't move the page at all). I h ...

htmlcssanchor

The AddClass function fails to function properly after an ajax form is submitted

I am facing a challenge in setting up validation for my ajax form. My goal is to have a red border appear around the input field if it is submitted empty. Unfortunately, when I try to use addClass(), it does not seem to have any effect. The alert message ...

javascriptjquerycssajaxvalidation

Can you explain the distinctions among <Div>, <StyledDiv>, and <Box sx={...}> within the MUI framework?

When exploring the MUI documentation, I came across a table of benchmark cases that can be found here. However, the differences between the various cases are not clear to me. Can someone please explain these variances with real examples for the following: ...

javascriptcssreactjsmaterial-ui

Determine the initial left position of a div element in CSS prior to applying

Scenario : const display = document.querySelector('.display'); const container = document.querySelector('.outer-div'); document.addEventListener("click", (event) => { if (!event.target.closest("button")) return; if(event ...

javascriptcsscss-transitionsgetboundingclientrect

What are the steps to turn off the rule .MuiInputBase-inputType-121 in Material UI TextField for email input field because of a display problem?

Here is a snippet of JSX code: import TextField from '@material-ui/core/TextField/TextField'; <Col xs={6}> <TextField pattern=".{3,}" name="fullName" ...

javascripthtmlcssmaterial-uimui

When using jQuery, adding a class does not always trigger CSS animation

Currently facing a peculiar issue. I am utilizing jQuery to load articles from JSON and would like to dynamically add a class of 'animate' to each loaded element. $.each(jsonArticles, function (i, article) { var $articleHTML = $( ' ...

javascriptjquerycsscss-animations