'My Paragraph won't stay on the same row as my Checkbox. What Html text element should I use with an input? [duplicate]

Goal:

I want text to come after my checkbox

Problem:

My p tag comes directly after my check box input, but I can't get them on the same line and Next to each other.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <input type="checkbox">
    </div>
    <div class="col">
      <p> Save My card for future payment</p>
    </div><br>
  </div>
</div>

Edit: The best way to put Text after a checkbox or other user input button is to use a LABEL not a p tag.

<label for="check">text goes here</label>
<input type="checkbox" id="check">
htmlcss


Solution 1:[1]

If you're using Bootstrap as your class names suggest, this is the right way:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
        <label class="form-check-label" for="defaultCheck1">
          Save my card for future payment
        </label>
      </div>
   </div>
</div>

See the docs at https://getbootstrap.com/docs/4.6/components/forms/#checkboxes-and-radios.

If not, use standard checkbox markup so your form is accessible to those using assistive technology (and more standard):

<label>
    <input type="checkbox">
    Save my card for future payment
</label>

Notice that in both cases the label is clickable.

Solution 2:[2]

I assume that your code look like that.

.checkbox_div {
  display: flex;
  align-items: center;
}

.checkbox_div p {
  display: inline-block;
}
<div class="checkbox_div">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <p>Paragraph text </p>
</div>

If not then format your code look like that. Take checkbox input and p tag inside a div. And then add some css which is given below.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 isherwood

Related Questions