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

How to use jQuery to dynamically set the value of a column span in a

Struggling with setting the value for a table column span. Here is my jQuery code: $('tr td data-th=Name span').val('My span content...'); This is how my HTML appears: <tr> <td data-th="Name"><span class="edit-inpu ...

javascriptjqueryhtml

What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

I'm trying to implement responsive CSS animation delay to create an accordion effect when a user clicks on an arrow associated with a table, all without using JavaScript and only utilizing HTML/CSS. Check out the mobile view in action here: https://w ...

htmlcss

Is it possible to include spaces in a JavaScript alert message?

Is it possible to add spaces in an alert message? I have been trying to include spaces in my alert messages, but the alerts do not appear when there are spaces. Example where it works: https://jsfiddle.net/yczrhztg/ Example where it doesn't work: ht ...

javascripthtml

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

A div element designed to showcase a speedometer; <div class="outer"> <div class="needle" ></div> </div> The speedometer animates smoothly on hover; .outer:hover .needle { transform: rotate(313deg); transform-origin: ce ...

javascriptjqueryhtmlcsscss-animations

Learn how to incorporate a 'Select All' feature as the primary choice in DevExtreme SelectBox with Angular 15 through Html coding

We are looking to replicate the following basic HTML select in Angular 15 using a dropdown control from DevExpress known as dx-select-box <select ng-model="selectedVal" ng-change="selectedValueChanged()"> <option value=&q ...

htmlangularselectdevexpressdevextreme-angular

Turning multiple .html files into a single csv using beautifulsoup

I am dealing with a situation where I have 13,000 html files stored in a folder and my goal is to consolidate all the data into a single csv file. Although I believe I have made progress in extracting the data, I am encountering challenges when it comes t ...

pythonhtmlcsvbeautifulsoup

Implementing JavaScript to assign a symbol to several <span> elements with identical ids

I have a looping span element on my page that is generated based on the number of records in a database table. The appearance of the span can vary, displaying either one or multiple instances. Each span has the following structure: <span class="add-on" ...

javascriptjqueryhtmlcss

Unusual glitch spotted on website in real-time, unexpected large circle suddenly materializes on Safari and Internet Explorer

I came across a strange issue on a live site and I need to find a solution quickly. After clicking on the "get a quote" button, a random giant circle with only a border appears on my page when loading a form via ajax. This odd occurrence is visible on Int ...

jqueryhtml

Instructions on creating an "already clicked" style for an <a> href

Is there a solution to display my href as already clicked? I'm looking for a property or method that does not involve css or javascript. ...

htmlcss

What methods are available to fill a canvas with shapes other than circles?

My goal is to fill the canvas with a black color. The code I have used for this purpose is as follows: var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle='rgba(0,0,0,0.1)'; ctx.fillRect(0,0,c.width,c.height) ...

javascripthtmlcanvashtml5-canvasmedia

Is CDATA insertion automatic in JavaScript within Yii framework?

Currently I am working with Yii and have noticed that whenever I insert any JavaScript code, it is automatically encapsulated in CDATA. I am curious as to why this is happening. Will there be any issues if I were to remove the CDATA tags, considering that ...

phpjavascriptjqueryhtmlyii

Tailwind Prefixing in Laravel 8.x

When working with Tailwind, it's possible to set a prefix in the tailwind.config.js file. You can find more information about this here. In a Laravel project that uses both Bootstrap and Tailwind through npm management, I have set a prefix of "tw-" f ...

laravelbootstrap-4tailwind-csslaravel-pagination

The issue of try-catch not functioning properly within a recursive function

Goal My objective is to capture the "Failed to load resource" error and display it in an alert window. Problem I am attempting to handle a video that does not exist. The try catch block is not catching the exception. Scenario I am working on playing vide ...

htmlrecursionhtml5-videotry-catch

Display an image on an HTML page based on the TypeScript data in an Ionic Angular application

After retrieving user profile data from the database and storing it in an observable, I am able to access properties such as profileData.username, profileData.msgnumber, and more. When profileData.avatar returns the name of the avatar the user is using, I ...

htmlangulartypescriptionic-framework

Loading HTML content in a WPF WebBrowser without encountering security messages

Currently, I am developing a WPF application in which I create the content of an HTML file as a string (including some JavaScript functions for calculations). After generating the string, I save it as an HTML file on my local disk and then reload it using ...

javascriptc#htmlwpf

ajax request sends data to php file, which then processes the data and sends it back using $_POST

Currently, I am in the process of developing a budget management application using a combination of HTML, Javascript, and PHP. The main objective is to allow users to input data into a database through a form interface. To achieve this functionality, I hav ...

javascriptphpjqueryhtmlajax

It's possible for anyone to enhance the appearance of the Download button by adding styles without compromising its functionality

Looking to enhance the style of the Download button as it appears too formal. Seeking assistance in adding some button styles to make it more stylish. The code is correct, just aiming to give the Download button a trendy look with specified styles. ...

javascripthtmlcss

Exploring the versatility of Angular 4 by implementing a switch feature with

My goal is to have the menu change based on the click of the "Cadastros" action, but it seems like the issue lies with the "workspaceSelected" property not being visible to all components. I believe the best approach in this situation would be to have the ...

htmlangulartypescript

The Video Element Is Not Expanding to Fill the Entire Parent Div

My goal is to design a responsive layout where a video element spans the full width of its parent div with the class .hero. However, despite my best efforts, the video doesn't seem to be expanding as expected. Here's the relevant CSS code I' ...

htmlcss

Automatically tally up the pages and showcase the page numbers for seamless printing

I've been tackling a challenge in my Vue.js application, specifically with generating invoices and accurately numbering the pages. An issue arose when printing the invoice – each page was labeled "Page 1 of 20" irrespective of its actual position in ...

javascripthtmlcssvue.js