Business with the Checkbox

Navigation
0

good morning to all, what I want to do I think it's something simple but I do not give with the answer, I'm trying to make a form and I need to locate the checkboxes on the right and the options on the left.

This is a bootstrap example. How should I code it so that it stays the same as the image? 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<script src="/lib/jquery-1.12.2.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Form control: checkbox</h2>
<p>The form below contains three checkboxes. The last option is disabled: 
</p>
<form role="form">
<div class="checkbox">
  <label><input type="checkbox" value="">Option 1</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 2</label>
</div>
<div class="checkbox">
  <label><input type="checkbox" value="">Option 3</label>
</div>
</form>
</div>

</body>
</html>

Beforehand, I appreciate all the help you can give me. Greetings.

    
asked by Jorge Luis Sanchez 21.06.2018 в 17:00
source

2 answers

0

As simple as taking the inputs from the labels 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="/lib/bootstrap.min.css">
<script src="/lib/jquery-1.12.2.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<h2>Form control: checkbox</h2>
<p>The form below contains three checkboxes. The last option is disabled: 
</p>
<form role="form">
<div class="checkbox">
  <label class="col-md-6" for="check1">opcion 1</label>
  <input class="col-md-6" type="checkbox" name="check1" value="">
</div>
<div class="checkbox">
  <label class="col-md-6" for="check2">opcion 2</label>
  <input class="col-md-6" type="checkbox" name="check2" value="">
</div>
<div class="checkbox">
  <label class="col-md-6" for="check3">opcion 3</label>
   <input class="col-md-6" type="checkbox" name="check3" value="">
</div>
</form>
</div>
    
answered by 21.06.2018 / 17:14
source
0

You can use what the grids are in the bootstrap documentation link and for example in all your screen measures 12 and that you can divide it into several parts so that you get the result for example so 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/lib/bootstrap.min.css">
<script src="/lib/jquery-1.12.2.min.js"></script>
<script src="/lib/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
<div class="row">
<h2>Form control: checkbox</h2>
<p>The form below contains three checkboxes. The last option is disabled:</p>
<form class="col-md-12">
<div class="form-group">
<label class="col-md-6" for="">opcion 1</label>
<input class="col-md-6" type="checkbox" name="check1" value="">
</div>
<div class="form-group">
<label class="col-md-6" for="">opcion 2</label>
<input class="col-md-6" type="checkbox" name="check1" value="">
</div>
<div class="form-group">
<label class="col-md-6" for="">opcion 3</label>
<input class="col-md-6" type="checkbox" name="check1" value="">
</div>

</form>
</div>
</div>
</body>
</html>

you just have to give it a little more style ...

    
answered by 21.06.2018 в 17:18
How to display an EditorFor based on a selected item from a DropDownList in MVC 5? Problem accessing server through rest