Unable to vertically align radio buttons

Using Bootstrap 4, I want to create a list of three radio buttons. Here is the HTML structure I have tried:

<div class="mt-3 text-center">
  <div class="custom-control custom-radio">
    <input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
    <label class="custom-control-label" for="manualLoading">Foooooo1</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
    <label class="custom-control-label" for="dateLoading">Foo2</label>
  </div>
  <div class="custom-control custom-radio">
    <input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
    <label class="custom-control-label" for="periodLoading">Fooooo3</label>
  </div>
</div>

However, I am encountering an issue with how it's displayed. The radios are not behaving as expected. Here is a link to a JSFIDDLE showcasing the problem. Any suggestions on how to resolve this?

htmlcssbootstrap-4

Answer №1

To address the issue at hand, one potential solution involves incorporating display:grid within a newly created class called content-checkbox, while removing the existing class custom-control-label.

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style>
            .content-checkbox {
               display: grid;
               justify-content: center;
            }
        </style>
    </head>

    <body>
        <div class="mt-3 text-center content-checkbox">
            <div class="custom-control custom-radio">
                <input type="radio" id="manualLoading" name="loadingType" checked="" class="custom-control-input">
                <label class="custom-control-label" for="manualLoading">Foooooo1</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="dateLoading" name="loadingType" class="custom-control-input">
                <label class="custom-control-label" for="dateLoading">Foo2</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="periodLoading" name="loadingType" class="custom-control-input">
                <label class="custom-control-label" for="periodLoading">Fooooo3</label>
            </div>
        </div>
    </body>
</html>

UPDATE: Introduce a new class named content-checkbox

Answer №2

To achieve this, I recommend utilizing the default classes provided by Bootstrap 4. You can try out the following code snippet:

Default radio 
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</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

Utilize an array with dynamic referencing

I am attempting to reference a single index out of 30 different indices based on the user's actions, and then utilize ng-repeat to iterate through each item in the index. Controller: $scope.meals = [ { title: 'Abs', url:"#/app/mworkout ...

javascripthtmlangularjsionic-framework

ChakraUI ForwardRef in React not applying variant to child component

Encountering an issue with the combination of forwardRef and Input from ChakraUI. Attempting to create a generic input component with a flushed variant, but facing difficulty as Chakra keeps resetting it back to default. ModalInput Component import { for ...

cssreactjsreact-propschakra-ui

Once more baffled by the nested boxes, this iteration adorned in vibrant hues and trimmed with a striking border

In a previous inquiry, I sought advice on centering one box within another. However, my attempts this time around have led to some peculiar results. I experimented with two different code variations- one involving a background color and the other utilizing ...

htmlcss

What is the best method to showcase an array representing a key-value pair enclosed in {} as a list item within VueJS?

I have a specific object structure with a key that contains an array as its value. How can I present this information to the user in a list format? allComponents: [ {name: 'Standard field', uses: ['Inconsistent inputs', 'Formul ...

javascripthtmlvue.jsfor-loopv-for

HTML form for sending data to an express route with specific parameters

Looking for some help on routing in express. I currently have a form that collects user input and submits it to the /images route, but I would like it to instead submit to /images/:s1. This way, I can utilize the URL parameters effectively. Any suggestio ...

htmlnode.jsexpress

Styling Html.ActionLink is not supported

I'm struggling to style my links properly when combining CSS and Bootstrap with MVC. It seems like @Html.ActionLink is needed for redirection, but styling remains a challenge. Is there a way to style it effectively? When using pure CSS, everything wo ...

cssasp.netasp.net-mvcmodel-view-controllerstyling

What's preventing my link from opening?

I've written this code for two tabs: <li> <a href="#gallery_place" role="tab" data-toggle="tab"> <i class="fa fa-picture-o"></i> <?php _e("Gallery", ET_DOMAIN); ?> </a> </li> <li> <a href ...

phpjqueryhtml

Incorporating custom CSS and HTML into the link is essential for enhancing the appearance of KnpMenu

I'm working with the KnpMenuBundle and I need to customize a link that has the route 'uri'=>'#'. How can I achieve this? The desired link should be styled like this: <a href="#" class="js-sub-menu-toggle"> &l ...

htmlcsssymfonytwigknpmenubundle

Stacking a Bootstrap column above another column

Is there a way to stack a bootstrap column on top of another column while maintaining its size and responsiveness? Consider this scenario with 4 columns arranged in a row: https://i.sstatic.net/qug0g.png Upon clicking the Overlay btn, the E column shoul ...

htmlcsscss-positionbootstrap-5

Remove multiselect label in PrimeNG

I am attempting to change the multiselect label of selected items and replace it with a static default label. Here is what it currently shows: https://i.sstatic.net/qBNHG.png This is what I have tried: .p-multiselect-label { visibility: collapse; ...

javascriptcssangularfrontendprimeng

ng-repeat failing to display the final two divs

I'm having trouble with the following code. The second to last div inside the ng-repeat is not being rendered at all, and the last div is getting thrown out of the ng-repeat. I can't figure out what's wrong with this code. Can anyone spot th ...

javascripthtmlangularjs

Modify the css with JQUERY when there are no rows inside the tbody section

Is it possible to change the css using jquery if there are no rows in the table body? I have attempted this but my current approach is not working. I tried adding an alert within the if statement, but the alert did not appear. My goal is to hide the table ...

javascriptjqueryhtmlcss

Floating action buttons in CSS

I'm trying to create a button that reveals additional options when hovered over. I've been looking for a method similar to what's shown in the image below, but haven't been successful. This needs to be implemented on a web page using HT ...

jqueryhtmlcss

What is the best way to create a centered vertical line with text in the middle?

I attempted to replicate a form that contains a vertical line <span class="vertical-line">or</span> with text centered in it! How can I create a similar appearance like this form? I considered using hr but it generates a horizontal ...

htmlcss

Unusual css glitch observed when hovering over a span/link

Currently, I'm struggling with a CSS code issue. My goal is to have the div #hidden show when someone hovers over the link in #trigger. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> ...

htmlcss

What is preventing my CSS from being applied to elements other than the body, despite using block content?

I'm trying to customize the style of my webpage body, but it's also affecting my navbar from the base.html file. Can anyone help me understand why this is happening and how I can isolate the styling to just apply only to the <body> contents ...

htmlcssdjango

Is there a way to insert a dot after every two digits in a text field using Javascript upon keypress?

When inputting a 4-digit number (e.g. 1234) in my text field with value format 00.00, I want it to automatically adjust to the 12.34 format. How can I achieve this behavior using JavaScript on keyup event? ...

javascriptjqueryhtmlcss

The div block containing the table is experiencing horizontal overlap as additional elements are inserted

When creating a table within the div section of the code, I am incorporating text using the DRAG and DROP feature with appropriate styling. The table adjusts in size when I resize my window, indicating that it is functioning correctly. However, as the num ...

javascripthtmlcss

The registration page in PHP is malfunctioning, and the reason remains a mystery to me

Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...

phphtmlmysql

Angular does not recognize "modal" as a valid element in this context

After successfully creating a component for my project using Angular, I encountered an issue when adding a modal window. Now, nothing appears when serving my app and Angular throws the error "modal is not a known element". HTML Document <modal> < ...

javascripthtmlangulartypescriptmodal-dialog