Question 217275 in Html Question posted in
Some basic documentation can be found here.

How to keep radio button and label in the same line with long label content in HTML/CSS?

I have an issue with an HTML radio button and its label. I want to keep the radio button and label in the same line. But if the label text is very long, the label will sit below the radio button.
html:

<div class="form-check fs-3 mb-3">
  <input id="low-3" name="low-3" type="radio" value="light">
  <label for="low-3">very long very long very long very long context</label>
</div>

How can I keep the label on the same line as the radio button?

Tags:

3

Answers


  1. 0

    Now your label has inline-block display property so your elements on different lines. Wrap the input and the label and set "d-inline" class for the label and your elements will be on the same line.

    Like this:

       <div>
    <input id="low-3" name="low-3" type="radio" value="light" />
    <label for="low-3" class="d-inline">very long very long very long very long context</label>
  </div>
    Login or Signup to reply.
  2. 0

    Problem

    Bootstrap’s _reset.scss file sets label { display: inline-block; } by default, as you can see in the screenshot below.

    Screenshot

    Solution

    Simply set the Bootstrap d-inline class on the <label>, which is equivalent to label { display: inline; }.

    See the snippet below.

    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
</head>

<body>
  <div class="form-check fs-3 mb-3">
    <input id="low-3" name="low-3" type="radio" value="light">
    <label class="d-inline" for="low-3">very long very long very long very long very long very long very long context</label>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
  3. 0

    From what I understood, here’s my code, let me know if you’ve a more specific question.

    <div class="form-check fs-3 mb-3">
  <input id="low-3" name="low-3" type="radio" value="light">
  <label for="low-3">
    Prevents me from lifting heavy weights off the floor, but I can manage if the weights are conveniently.
    Prevents me from lifting heavy weights off the floor, but I can manage if the weights are conveniently.
    Prevents me from lifting heavy weights off the floor, but I can manage if the weights are conveniently.
    Prevents me from lifting heavy weights off the floor, but I can manage if the weights are conveniently
  </label>
</div>

    Output:

    screenshot of output

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search