Is there a way to display .form-check-inline buttons on a different line than their corresponding label?

I'm trying to create a form with radio buttons and using Bootstrap 4 to align them horizontally with the .form-check-inline class. However, this causes the input labels to be on the same line as the buttons:

<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
      <form>
        <div class="form-group">
          <label>Label</label>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" name="test">
              Option 1
            </label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" name="test">
              Option 2
            </label>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

This layout isn't visually appealing - I'd like the labels to be on their own line, separate from the radio buttons. How can I achieve this using Bootstrap's design principles?

htmlcssformsbootstrap-4

Answer №1

Is it acceptable and accessible to have three labels for two inputs? It is recommended to use a legend element for the first label.

<div class="container">
  <form>
    <div class="form-group">
      <legend>Legend</legend>

      <div class="form-check form-check-inline">
        <label class="form-check-label">
          <input type="radio" name="test">
          Label 1
        </label>
      </div>

      <div class="form-check form-check-inline">
        <label class="form-check-label">
          <input type="radio" name="test">
          Label 2
        </label>
      </div>

    </div>
  </form>
</div>

Check out the demo here

Answer №2

It's a good practice to have the label placed outside the form tag for better structure and clarity. For example, you can place the label like this:

    <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  </head>
  <body>
    <div class="container">
     <label>Label</label> <!-- Placed here -->
      <form>
        <div class="form-group">
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" name="test">
              Option 1
            </label>
          </div>
          <div class="form-check form-check-inline">
            <label class="form-check-label">
              <input type="radio" name="test">
              Option 2
            </label>
          </div>
        </div>
      </form>
    </div>
  </body>
</html>

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

Display information in the DIV element after using the .focus() method in JQuery

Imagine I have a form structured like this: <select id="model"/> <input type="text" id="serial"/> <label>Packing <div id="packing" name="packing"></div></label> <br/> <input id="pack1" type="radio" class="pack" ...

jqueryajaxformssetfocus

Is there a way to restrict keyboard input on this date picker?

Can you review the following link and let me know which properties or events I should utilize in this scenario? https://codesandbox.io/s/charming-frost-qrvwe?file=/src/App.js ...

javascripthtmlreactjsdommaterial-ui

Align text in a vertical manner within various containers

I'm encountering a puzzling issue with my side-by-side divs. I have different-size headers in each div, and I want the top header in each to be baseline aligned. Unfortunately, using vertical-align: baseline doesn't seem to work between the two d ...

htmlcss

What could be the reason for the validation failure?

companyprofile.html <form #f="ngForm" name="companyProfileForm" ng-submit="companyFrmSave(objCS, objCSCurrency)" novalidate=""> <div class="row form-group"> <div class="col-md-12" > ...

formsangularvalidation

Require this form to be centered flawlessly

<form class="form-horizontal" role="form" id="contactf" action="http://titan.csit.rmit.edu.au/~e54061/wp/form-tester.php" method="post"> <div class="form-group"> <label class="control-label col-sm-2 lb" for="email">Email : </ ...

htmlcsstwitter-bootstrap

What is the method for adjusting the size of text while rendering on a canvas?

When it comes to scaling text with CSS transform scale, for instance: transform: scale(2, 4); fontSize: 20px // Is including fontSize necessary? I also have the task of displaying the same text on a canvas element. function draw() { const ctx = document ...

javascriptcsshtml5-canvascss-transforms

Employing Jquery for restricting checkbox selection based on parent HTML elements

UPDATE I am looking to limit checkbox selection in specific sections on the same page. To prevent conflicting inputs from different sections, I believe using the label selector <label data-addon-name="xxx"> as a separator is the best appro ...

javascriptjquerycsscss-selectors

Is there a way to deactivate the spin buttons for an input number field?

Is there a way to create an input element with type number in Vue using createElement() in TypeScript and then disable the spin buttons for increment and decrement? I attempted to use the following CSS: input[type=number]::-webkit-inner-spin-button, input ...

htmltypescriptvue.js

Is there a setting causing Webpack to not rebuild when there are changes to the CSS?

I have configured postcss-loader and style-loader on webpack, and I am using webpack-dev-server. However, every time I make changes to the CSS, webpack does not rebuild automatically. The script for webpack dev server that I use in npm scripts: webpack-d ...

cssnode.jswebpackwebpack-dev-server

Guide to implementing the collapsible start and stop button feature in Angular

Having an issue in my Angular application with the dashboard page. I've created a button for start or stop (toggle functionality) but it's not working as expected. .component.ts toggleCollapse(jammer) { this.jammer.isCollapsed ? 'START& ...

javascriptangulartypescripttwitter-bootstrapbootstrap-4

AngularJS 1: Dynamically updating input values in real-time

Hey everyone, I'm experimenting with Angular and have encountered a roadblock. I am trying to assign values to an input element using ng-repeat for a list of parameters. <input type="text" ng-model="parameters.inParameterName" class="form-control ...

htmlangularjsangular-ngmodel

Rules of HTML tables extend to the border size

Check out this HTML code snippet: div { border: 2px solid red; height: 50vh; width: 50vw; } table { border: 1px solid; table-layout: fixed; } <div> <table rules="cols"> <tr> <th>Name</th> < ...

htmlcsshtml-table

PHP Form Validation for Business Operating Hours

Can someone help me figure out how to allow users to input their preferred starting and ending times between 9:00 and 20:00? It seems like the issue lies in the variable type used in my code. Here is the form input: <div class="form-group"> ...

phpformsvalidationtime

Unveiling the Mystery: Java Tips for Capturing the Chosen Value from a DropdownChoice in Apache W

In my Java class, I created a method where I instantiate a DropDownChoice object for a select menu and add it to the form. Within this method, I am populating the projects list into the billableProjectsList. public class ReportCriteria implements Serializa ...

javahtmlwicketdropdownchoice

Optimizing the appearance of an unordered horizontal list in the most effective manner

When attempting to make lists horizontal and hide default bullets, is it necessary to apply {display:inline} and {float:left} to both the <li> tags or would just one of these properties suffice? <ul> <li><a href="#">First item< ...

htmlcssxhtmlhtml-lists

Show the file name in the email signature instead of displaying the image

I'm facing a unique challenge with images in my HTML email signature. Sometimes the images are replaced by their file names on certain email hosts. Interestingly, I can't replicate this error now as the images are displaying correctly again! He ...

htmlcssimageemail

Is there a way to activate a click event on a particular child element within a parent element?

When attempting to click on a specific descendant of an element, I located the ancestor using ng-class since it lacked an id. yes = document.querySelectorAll('[ng-controller = "inventoryController"]') Having found the desired ancestor, ...

javascripthtmlangularjs

Position the right div to float to the right with a dynamic width ahead of the left div in HTML to achieve

This particular challenge has proven to be quite difficult for me, and I have a feeling that I am overlooking something simple. My goal is to create a layout with a fixed-width left sidebar and a responsive variable-width content section on the right. Th ...

htmlcssresponsive-designcss-float

Adjust the height and eliminate gaps between rotated divisions

I'm currently working on a floating menu that includes several links. I've successfully applied a CSS style to rotate the menu vertically (-90deg), but I'm facing an issue with the height being greater than desired. How can I reduce the heig ...

htmlcss

When the *ngFor directive disrupts the CSS Grid Layout, resulting in all items being displayed in a single column

I am a beginner in the world of programming and web development. Currently, I am working on building my own personal website. My goal is to arrange boxes in a grid with 4 columns, similar to the layout you can find at this link: Each box represents an ob ...

htmlcssangulartypescriptcss-grid