Issues with alignment arise when adjusting the font size of labels using radio buttons in Bootstrap

Currently, I am dealing with an issue related to the alignment of radio buttons and their labels in the bootstrap style.

The problem becomes apparent when I adjust the font size of the label: the radio button remains the same size in its original position, while the label changes size causing it to shift slightly downwards (the degree of movement varies with the font size; larger size results in a greater shift).

Take a look at the alignment problem in this screenshot:

https://i.sstatic.net/JwDkO.png

Additionally, I am sharing the relevant portion of my code with you:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form name="ejercicio_p1_form" method="POST" action="/response_p1_exercise">
  <div class="container">
    <div class="row">
      <div class="col-2"></div>
      <div class="col-3">
        <div class="radio" id="radio_p1_1">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_1" value="1" onclick="submit_form_p1_exercise()">
            <label style="font-size:30px" class="radio custom-control-label" for="p1_ejer_1"> Option 1</label>
            </input>
          </div>
        </div>
      </div>
      <div class="col-2">
        <div class="radio" align="center" id="radio_p1_2">
          <div class="custom-control custom-radio">
            <input type="radio" class="custom-control-input" name="p1_ejer" id="p1_ejer_2" value="2" onclick="submit_form_p1_exercise()">
            <label style="font-size:30px" class="radio custom-control-label" for="p1_ejer_2"> Option 2</label>
            </input>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

Answer №1

Bootstrap label makes use of :before and :after with the properties position: absolute and top: .25rem. This setup guarantees the fixed position of the radio circle. By utilizing top: calc(foo), we can precisely determine its position.

Considering the radio circle's height is 1rem and the label height varies at 100%, the calculation for the top left corner coordinates of the circle is achieved. It involves taking 50% of the label height, with half of the circle positioned above the center and half below, resulting in a subtraction of 0.5rem.

Hence, the formula is: top: calc((100% - 1rem)/2)

Take a look at the snippet below to observe the visual representation of this configuration.

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

Organizing Angular Material Styles using Namespacing

In an attempt to develop reusable components with Angular 1.4.3 and Angular-Material 1.0.5, the goal is to seamlessly integrate these components across various applications. However, a challenge arises as the Angular Material CSS contains styling rules th ...

The querySelector function is now encountering errors due to a change in the data

Currently, I am utilizing a query selector to retrieve an input when a user selects different buttons. Initially, the buttons had options such as: 8x10 inch 12x16 inch 20x24 inch However, I made changes to the options format like so: 8" x 10" ...

Setting button height dynamically in React Native

I've implemented a button using React Native Elements in my layout. Here's the code snippet: <Button title="Login" buttonStyle={{ backgroundColor: Colour.green }} containerStyle={{ ...

Invert the motion within a photo carousel

Is there anyone who can assist me with creating a unique photo slider using HTML, CSS, and JS? Currently, it includes various elements such as navigation arrows, dots, and an autoplay function. The timer is reset whenever the arrows or dots are clicked. Ev ...

Having trouble with sending a post request through ajax

Whenever I try to initiate an Ajax request upon clicking a button, the request never seems to get executed. Below is the snippet of my HTML code : <!DOCTYPE html> <html lang="en"> <head> <title>User Form</title> ...

Footer rises with bootstrap zooming

Hey everyone! I'm a beginner in the world of web development and currently working on creating my own website. I've run into an issue with my footer - I want it to stay fixed at the bottom even when zoomed in, but for some reason, when I zoom in, ...

Guide on how to modify the color of a single row within a table with just a click

My table structure is as follows: <table> <tr> <td>A1</td> <td>A2</td> <td>A3</td> <td>A4</td> </tr> <tr> ...

What is the best way to align this button next to the text and header on the page?

I'm struggling to position this button next to the paragraph element instead of below it. I want them both on the same line. <div class="up"> <div class="ban"> <div class="act"> <h2>Joi ...

Designing a website using HTML and CSS with the goal of optimizing it to fill

My website includes all the recommended elements in the head area: <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, ...

Learn the process of extracting a particular value from JSON data and displaying it in HTML by utilizing AngularJS's ng-repeat directive

As a newcomer to angularjs, I am encountering difficulties retrieving and displaying a specific value from a json file in order to showcase it on my view page using angularjs ng-repeat for image source. My goal is to repeat the json file based on a particu ...

Creating a clickable dropdown link in the navbar with Bootstrap 4

I'm currently working with Bootstrap 4 and I have a menu item that includes a dropdown link. My goal is to make the text within the menu item clickable as a link, while still retaining the dropdown toggle functionality to allow for selection of other ...

I've exhausted all my knowledge but still unable to get Tailwind to work

I've been troubleshooting Tailwind for the past 6 hours. Managed to set it up in a simpler Nextjs/React/Typescript project, but struggling to get it working in this larger codebase. I'm sure I'm missing something obvious, but I'm at a ...

Tips for designing an Ionic app with a Pinterest-inspired layout

Recently stepping into the world of Ionic development, I find myself facing a challenge in creating a Pinterest-inspired layout using Ionic. Specifically, I am struggling to achieve a two-wide list of items with varying heights. Can anyone offer guidance ...

Tips for aligning numbers in a monospaced ordered list

Is there a way to align the numbers in a numbered list within a table using monospace font so that they are at the same level as bullets on a bullet list? Simplest example: ol { font-family: monospace; } ul, ol { margin-top: 10px; margin-bottom: ...

Tips for incorporating Action Links into your CSS workflow

<li class="rtsLI" id="Summary"><a href="javascript:void(0);" onclick="javascript:rtsXXX.OnClientTabSelected(this‌​, 0);" class="rtsLink"><span class="rtsTxt">Test</span></a></li> I have made a change by replacing th ...

Assistance in configuring Zurb Foundation 5 for optimal integration with Laravel

As a relatively new user to Laravel with previous experience using older versions of Foundation, I am currently in the process of setting up a new Laravel project. My goal is to integrate the Foundation framework into my project, but I find myself a bit co ...

What is the best way to use multiple encoding types when sending data via a POST method in Node.js?

My current challenge involves sending a combination of name and description text data alongside a video file. Unfortunately, I've encountered an issue where I can only send either the video or the text, but not both simultaneously. Below is the code ...

What causes the vuetify tag not to render as HTML in the browser?

I ran into a styling issue while using Vuetify in my Nuxt 2 project. Upon inspecting the element in dev tools, I noticed that some Vuetify tags were not being converted to HTML as expected (they were displayed as div class="tag_name"). These unco ...

Is it possible to dynamically render css using Express.js?

I have a need to dynamically generate CSS with each request. For example, in my Express.js application, I've set up a route like this: /clients/:clientId/style.css When a matching request is received, I want to retrieve the Client from the reposito ...

Customizing Bootstrap CSS

In my recent code, I included a bootstrap css reference in this manner: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5T ...