Put the checkbox label to the left of it

Asked

Viewed 332 times

0

I’m trying to put the label of the checkbox to his left, but I’m not getting it, could help me ?

<label>
    <span>Text goes here</span>
    <input type="checkbox" class="checkbox style-2 " checked="checked">
</label>

Try it this way, but it still doesn’t work, it only works when I leave the label below the input, but that way he puts the checkbox to the right of label and in the precise case the left.

As in the image below:

inserir a descrição da imagem aqui

html css html5 css3

  • Why don’t you take the input from within the label and put the label before.

  • Because the input is not appearing from there

  • Matheus, do you want to put "Text Goes here" on the left side of the checkbox? It already happens. If you’re on the right side, just invert the span line with the input line. <label> <input type="checkbox" class="checkbox style-2 " checked="checked"> <span>Text Goes here</span> </label>

  • Yes here is happening, but when I put in my application is not occurring, on the left the input does not appear, but on the right side it appears, it is very strange.

  • You are using frameworks like Bootstrap, Materialize, etc..??

  • I am using Bootstrap @Leandrade

  • Your code does not reproduce what is described in the problem, it would be important a [mcve] to be able to remedy the doubt. Click on the link I just passed, which has some interesting tips on how to make a valid example.

Show 2 more comments

1 answer

1

Is working normal with Bootstrap 4 I believe with the version 3 also work:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="alert alert-primary">
  <label for="checkbox1">Free</label> 
  <input type="checkbox" class="checkbox style-2" id="checkbox1" checked="checked">
</div>

<br>

<div class="alert alert-success">
  <input type="checkbox" class="checkbox style-2" id="checkbox2" checked="checked">
  <label for="checkbox2">Free</label>
</div>

  • 1

    I did the tests with your example, again the left input works, but the right input is not appearing I will analyze and see if I find something that may be influencing.

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.