Tips for creating space between a label and radio button in Bootstrap 4

I attempted to use this solution as suggested, but unfortunately, it did not yield the desired results. I seek advice on how to achieve the intended outcome.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-4">
    <p>Representing for</p>
    <label class="radio-inline" style="">
      <input type="radio" name="optradio" checked="true" style="padding-left:15px;">A Company
      </label>
    <label class="radio-inline" style="padding-left:15px;">
      <input type="radio" name="optradio" style="padding-left:15px;">An Individual
      </label>
  </div>
</div>

Visit JSfiddle

htmlcssbootstrap-4radio-button

Answer №1

input elements do not require a closing tag. Instead, wrap the label inside a span and add margin to it.

label span{
  display:inline-block;
  margin-left: 10px;
}
<div class="form-row">
   <div class="col-4">
      <p>Signing on behalf of</p>
      <label class="radio-inline" style="">
      <input type="radio" name="optradio" checked="true" style="padding-left:15px;"><span>A Company</span>
      </label>
      <label class="radio-inline" style="padding-left:15px;">
      <input type="radio" name="optradio" style="padding-left:15px;"><span>An Individual</span>
      </label>
   </div>
</div>

Answer №2

Just a quick update: To create space between the input and label, you can simply assign an 'id' to the input element and use a 'for' attribute on the label element. This will allow you to customize the styling of the label for added spacing.

<input id="organization" type="radio" name="optradio" checked="true"  /><span ></span><label for="organization" class="radio-inline" style="padding-left:15px;"> An Organization
  </label>

Answer №3

Instead of using padding-left, try using margin-right. Also, remember not to include a closing </input> tag as it auto closes like <input />

.radio-class {
  margin-right: 15px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-row">
  <div class="col-4">
    <p>Signing on behalf of</p>
    <label class="radio-inline" style="">
      <input type="radio" name="optradio" checked="true" class="radio-class" />A Company
      </label>
    <label class="radio-inline" style="margin-right:15px;">
      <input type="radio" name="optradio" class="radio-class" />An Individual
      </label>
  </div>
</div>

Answer №4

Borrowing inspiration from Mr. Belugin's suggestion, I came up with a way to give all radio buttons a right margin using CSS. This approach didn't involve adding any extra classes to the multitude of radio buttons in my form.

The solution simply involves adding a 4px right margin to every radio button.

input[type=radio] { margin-right:4px; }

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

Changing the icon dynamically when a user unfollows through an AJAX request

I have created a follow icon (button) that allows signed-in users to click on it and add the game to their list using AJAX. However, I need help with switching the button icon and class. I'm not very familiar with JavaScript or AJAX. This is the cur ...

phphtmlmysqlajax

PHP is having trouble identifying the file extension for file uploads

After sending an array through AJAX and echoing it in PHP, I have the following data: [file] => Array ( [name] => XXXX.jpg [type] => image/jpeg [tmp_name] => D:\xampp\tmp\phpC5F2.tmp [error] => 0 [size] = ...

phphtmlajaxpdf

Dynamic value updates using jQuery input type formulas

I need help with a form that has two inputs: The first input allows the user to enter an amount, such as 1000. The second input is read-only and should display the value of the first input plus 1%. For example, if the user types in 1000 in the first fie ...

javascriptjqueryhtml

What is the best way to add animation to switch between table rows?

I am looking to add animation effects when table rows appear and disappear. Initially, I attempted using a CSS transition, but it did not work due to the change in the display property. Subsequently, I opted for an animation, which provided the desired o ...

csscss-transitionscss-animations

The position of the carousel items changes unpredictably

My jQuery carousel consists of 6 individual items scrolling horizontally. Although the scroll function is working correctly, I have noticed that 2 of the items are randomly changing their vertical position by approximately 15 pixels. Upon reviewing the HT ...

javascriptjqueryhtmlcsscarousel

Divide the output results into two equal horizontal sections within the same HTML table

Is there a way to dynamically split the output of a specific result into two horizontal sections that fit within the browser width? The number of rows returned from the service is variable, so a fixed solution won't work. I also want to avoid manually ...

javascripthtmlcssangularjshtml-table

Updating an element within a for loop using Angular TypeScript

I'm trying to figure out how to update the value of an HTML DOM element that is bound from a TypeScript file in each iteration of a for loop, rather than at the end of the loop. I want to see all values as the loop is running. For example, imagine I ...

htmlangulartypescript

Having trouble with the jQuery toggle functionality not working as expected

I'm implementing a function where a div should increase in height and opacity when clicked, and then revert back to its original state when clicked again. I used the toggle function for this purpose, but the issue is that the button disappears when th ...

javascriptjqueryhtmlcss

arranging texts in a vertical stack with wrapping

Looking to change the orientation of my horizontally wrapped list items from vertical to horizontal. Take a look at my code snippet: HTML <ul> <li>Long text goes here.</li> <li>Another Longer Text Goes Here</li> < ...

htmlcsswhitespaceword-wrap

What is the best way to extend an inline-block element to cover the entire text line?

Let's talk about the scenario: https://i.stack.imgur.com/we05U.png In the image, there is a container (displayed as a div) with only one child - a span element. The goal is to introduce a second child that occupies the entire red space depicted in t ...

javascripthtmlcss

What is the best way to preload all videos on my website and across different pages?

I specialize in creating video websites using HTML5 with the <video> tag. On my personal computer, the website transitions (fadeIn and fadeOut) smoothly. However, on my server, each page seems to take too long to load because the videos start preloa ...

javascriptjqueryhtmlvideo

Issues with the code: $("input[type=checkbox]:checked").each(function() { var checkboxId = $(this).attr("id"); });

When submitting a form, I need to retrieve the IDs of all checked checkboxes. Currently, $(this).id() is causing an error. What is the correct code to obtain the IDs of all checked checkboxes? $("#pmhxform input:checkbox:checked").each(function() { ...

javascriptjqueryhtmlvalidation

Is it possible to use JavaScript for detecting third-party videos?

I'm currently developing an HTML5 video player that also has a fallback to flash. One of the challenges I am facing is that the video content is being provided by various third-party sources. It seems that some of these third parties serve videos bas ...

javascripthtmlflashvideo

Does adding the Angular bootstrap script at the end of the body tag impact webpage speed more than using ng-app on the body tag?

In the past, we had placed ng-app on the body tag which led to problems with dependency injection when multiple modules were being used on the same webpage. This required module creators to be aware of the existing app and inject their app into it. We are ...

javascriptjqueryhtmlangularjstwitter-bootstrap

How can I style the empty text in an ExtJS grid using CSS?

Is there a specific CSS class for a grid's emptyText? After inspecting the element with Firebug, all I found was: <div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex=" ...

javascriptcssextjsextjs4

When implementing flex-grow 1 on a flex box, the remaining space is not being filled as expected

I am struggling to make the green div fill the remaining space of a flex box container. My goal is to have the top row (blue) adjust its height based on content, and then have the row below (green) take up the rest of the space. However, it seems like the ...

htmlcssflexbox

HTML and CSS: Focus on border for <td> cells only

I'm looking to apply a border to only one cell (B2) without nesting tables. Here's the code: <table border="0"> <tr> <td>A1</td> <td>B1</td> <td>C1</td> </tr> ...

htmlcsshtml-tableborder

How to toggle the visibility of specific div elements within a v-for loop depending on their content?

I am working on a scenario where I have a collection of objects displayed in a v-for loop. Each object has a specific key value pair, and I want the user to be able to toggle a button outside the loop to show or hide elements based on that key value. Initi ...

javascriptjqueryhtmlvue.js

Submit your information discreetly

Is there a way to submit a form to an external website without it causing the page to reload? I am working on automatically logging users into their Google account without interrupting their browsing experience. The following code snippet allows me to pr ...

javascripthtmlforms

Measuring the space between components

I am looking for a way to dynamically calculate distance on a canvas, similar to the example shown in the figure. I want to be able to drag the highlighted joints in order to adjust the span for calculating distances. Are there any plugins available for th ...

javascriptjquerycsshtml