What is the best way to align a label and radio buttons side by side using Bootstrap?

I'm having trouble with what should be a simple fix. Check out my test site to see the issue for yourself.

<div class="form-group row">
    <label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
    <div id="choose-type" class="col-sm-10 div-inline">
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required > Writer
        </label>
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required> Enabler
        </label>
    </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

Give this a shot. The issue appears to be with the padding in your div elements, causing a misalignment in your bootstrap design (the col-sm-10 and col-sm-2 columns are not properly spaced). To resolve this, I have adjusted col-sm-10 to col-sm-8 for better fit.

<div class="form-group row">
    <label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
    <div id="choose-type" class="col-sm-8 div-inline">
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="writer" value="1" required=""> Writer
        </label>
        <label class="radio-inline">
            <input type="radio" class="radio-inline" name="user-type" id="enabler" value="2" required=""> Enabler
        </label>
    </div>
</div>

Answer №2

It appears you are referring to the height difference between the text and the radio button. You can simply eliminate the second occurrence of radio-inline from the <input> elements, as having it only in the <label> tag should be enough.

<div class="form-group row">
    <label for="choose-type" class="col-sm-2 form-control-label label-inline">Account Type</label>
    <div id="choose-type" class="col-sm-10 div-inline">
        <label class="radio-inline">
            <input type="radio" class="" name="user-type" id="writer" value="1" required > Writer
        </label>
        <label class="radio-inline">
            <input type="radio" class="" name="user-type" id="enabler" value="2" required> Enabler
        </label>
    </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

Using CSS alone, you can scroll a DOM item into view

If I have a lengthy list of items, only one of which is marked as active. Imagine being able to switch the active selection using keyboard inputs (press arrow down and the item below becomes active). Let's say the list of items is taller than the view ...

javascriptcssreactjsscroll

Choose does not showcase the updated value

My form contains a form control for currency selection Each currency object has the properties {id: string; symbol: string}; Upon initialization, the currency select component loops through an array of currencies; After meeting a specific condition, I need ...

htmlangulartypescriptforms

Experience the magic of Materialize CSS SideNav

I'm currently attempting to implement the mobile side navigation provided by Materialize. I've managed to display the menu icon, but when I click on it, nothing happens. It seems like the function is not being triggered, and there are no errors s ...

jqueryhtmlcssangularjsmaterialize

display or conceal a div when a radio button is selected

I need a way to display a specific div containing unique text once a radio button is selected, while hiding all other div sections. <?php foreach ($items as $item){ $i=1; echo ' <div class="form-check"> <input class="fo ...

javascriptphphtmlcss

What is the optimal way to disable a CSS3 transition?

Is there a way to disable a CSS transition specifically within a media query or any other scenario? For example: @media (min-width: 200px) { element { transition: width 1s; } } @media (min-width: 600px) { element { transi ...

htmlcsspropertiescss-transitions

Step-by-step guide on using variables to apply CSS

In our table consisting of 6 rows and 2 columns, the second column displays a Font Awesome circle followed by various values in the database field (such as Outstanding, Very Good, Good, Needs Improvement, and Adequate). I am looking to dynamically change ...

phpcss

Switch from HTML symbol to Java symbol

Is it possible to change an HTML symbol into a Java symbol? For instance, if I have &#xe000, is there a way to obtain the Java char representation like \ue000? What steps should I take to achieve this conversion? ...

javahtmlunicode

Ensure that HTML5 form fields are validated dynamically to make them mandatory

I have a form created using Bootstrap that contains several fields. By default, the first and second fields are required. Now, if the third field is filled out, the fourth field becomes mandatory. Similarly, if the fourth field is filled out, the third fi ...

jqueryhtmlvalidationdynamic

Utilize C# and SmtpClient to efficiently send HTML emails

Is there a way to send HTML emails instead of plain text using SmtpClient? I have been following the code provided in this solution, but the output always ends up as plain text. For example, the link in the sample message below is not displayed as an activ ...

c#htmlasp.netemailsmtpclient

What is preventing me from toggling classes?

Managing a compact to-do list where you have the ability to add new tasks and when clicking on an item, it should toggle between two classes while removing one. <ul id="myUL" class="todoList"> <li class='todoList card border-primary&apos ...

javascriptjquerycsstwitter-bootstrap

A guide on incorporating multiple nested loops within a single table using Vue.js

Is it possible to loop through a multi-nested object collection while still displaying it in the same table? <table v-for="d in transaction.documents"> <tbody> <tr> <th>Document ID:</th> &l ...

javascripthtmlvue.js

Implementing CSS functionality to enable and disable a button using JQuery upon user clicks

I'm currently exploring a solution to have the LeaderboardButton change its DIV to include bottom border radius upon clicking (which it does). However, I'm wondering how to make it so that upon clicking again, the border radius resets back to non ...

javascriptjquerycss

Angular JS: using data binding with dynamically inserted html elements

I'm currently experiencing difficulties with two-way data binding in AngularJS. I have provided a sample code snippet below: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular ...

javascriptjqueryhtmlangularjs

Decrease the padding value inherited from CSS while reducing the numerical value

One of the challenges I am facing is with a class that is added to different sections of a website to indicate that they are editable. This class is called .editable. Currently, when a user is logged in and hovers over an editable section, a red dashed bo ...

css

Move a Div to be positioned directly underneath another DIV

There are two DIV elements, one with an absolute position in the lower left corner of the main DIV. The second DIV is hidden and only displayed when clicking on a link. I want the second one to appear just below the first one, but because the first div&ap ...

css

using the ng-repeat directive to display the first line only once

I am working with a mongodb collection that has the following parameters: { "_id": ObjectId("59c265235e21f8a8b7d75b23"), "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7004071f02031e190019301212135e131f5e051b">[em ...

htmlangularjsangularjs-ng-repeat

When attempting to call a function after an unsuccessful AJAX load, the Jquery

Our catalog results page includes an external JavaScript file that utilizes AJAX - I have a jQuery function designed to change the color of a span when it detects specific text. You can view the code below: function ReInitStockColor(){ $(function() { ...

javascriptjqueryhtmlajax

Is the homepage the only page rendering correctly?

After working on an MVC project for over 6 months, I consistently faced a problem with HTML and CSS. The homepage always rendered correctly, as shown here: http://prntscr.com/tucp1 However, all other pages had strange white spaces between words, like in t ...

htmlcss

Tips for incorporating a CSS class representing an image into a CodeIgniter form submission

<?php $data = array( 'class' => "btn btn-primary btn-lg", 'name' => 'report' ); echo '<span class="glyphicon glyphicon-exclamation-sign"></span> '; echo form_subm ...

phpcsscodeigniterform-submit

Moving from one page to another

I am attempting to create a transition effect between sections within a single-page application. All the sections are contained on the same page, with only one section displayed at a time while the rest are set to display none. When a specific event is tri ...

javascripthtmlcsscss-transitions