Help with div in html with bootstrap

Navigation
0

Hello, I am designing a small form with a div, but when I execute it, I want the TEXAREA Observation to have the size of the two INPUT, as you can see the input TURN is very low I want to put it above and the text area is the same size as the two together

here my code 

//Incluido para fines de ejecución en stack-snippet
document.getElementById('fecha').value = new Date().toLocaleDateString("es-MX",{day:"2-digit", month:"2-digit", year:"numeric"}).replace(/\//g,"-");
<div class="form-group">
  <div class="col-md-6">
    <label class="col-xs-6">Fecha</label>
    <input id="fecha" name="fecha" value="<?php echo date('d-m-Y'); ?>" data-date-format="dd-mm-yyyy" class="form-control datepicker">
    <span class="help-block"></span>
  </div>
  <div class="col-md-6">
    <label class="col-xs-6">Observación</label>
    <textarea rows="3" cols="50" id="observacion" name="observacion" class="form-control"> </textarea>
    <span class="help-block"></span>
  </div>
  <div class="col-sm-6" align="left">
    <label class="col-xs-6">Turno</label>
    <select class="form-control" id="turno">
        <option value="">Seleccione el turno</option>
        <option value="MAÑANA">Mañana</option>
        <option value="TARDE">Tarde</option>
        <option value="NOCHE">Noche</option>
    </select>
    <span class="help-block"></span>
  </div>
</div>
    
asked by Ivan More Flores 03.05.2017 в 17:13
source

3 answers

1

Put in the same column the fields you want to the left and then adjust the height of the textarea. That would fit your code. 

//Incluido para fines de damostración
document.getElementById('fecha').value = new Date().toLocaleDateString("es-MX", {
  day: "2-digit",
  month: "2-digit",
  year: "numeric"
}).replace(/\//g, "-");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="col-md-6">
  <label class="col-xs-6">Fecha</label>
  <input id="fecha" name="fecha" value="<?php echo date('d-m-Y'); ?>" data-date-format="dd-mm-yyyy" class="form-control datepicker">
  <span class="help-block"></span>
  <label class="col-xs-6">Turno</label>
  <select class="form-control" id="turno">
           <option value="">Seleccione el turno</option>
           <option value="MAÑANA">Mañana</option>
           <option value="TARDE">Tarde</option>
           <option value="NOCHE">Noche</option>
        </select>
  <span class="help-block"></span>
</div>
<div class="col-md-6">
  <label class="col-xs-6">Observación</label>
  <textarea rows="3" cols="50" id="observacion" name="observacion" class="form-control"> </textarea>
  <span class="help-block"></span>
</div>
    
answered by 03.05.2017 / 17:20
source
1

If the limit of columns is 12 you can see that already with the div of the date and the observation are completing the 12 columns you must create a div: 

<div class="col-md-6">
  <!--aquí los 2 divs que compartirán el mismo espacio -->
</div>
<div class="col-md-6">
  <!--aquí iría el de observación -->
</div>

Here it would be how you want it

    
answered by 03.05.2017 в 17:22
0

You should take a look at the bootstrap grid system.

Bootstrap divides the width of the screen into 12 columns if you want the date and the shift to occupy half of them, you must assign them 6 columns. And to the textarea you want the full width to occupy, assign the 12 columns.

Take a look at this example: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="form-group">                                    
	<div class="col-md-6">
		<label class="col-xs-6">Fecha</label>
		<input id="fecha" name="fecha" value="<?php echo date('d-m-Y'); ?>" data-date-format="dd-mm-yyyy" class="form-control datepicker">
		<span class="help-block"></span>
	</div>                                    
	<div class="col-md-6" align="left">
		<label class="col-xs-6">Turno</label>
		<select class="form-control" id="turno" >
			<option value="">Seleccione el turno</option>
			<option value="MAÑANA">Mañana</option>
			<option value="TARDE">Tarde</option>
			<option value="NOCHE">Noche</option>
		</select>
		<span class="help-block"></span>
	</div>
	<div class="col-md-12">
		<label class="col-xs-6">Observación</label>
		<textarea rows="3" cols="50" id="observacion" name="observacion" class="form-control"> </textarea>
		<span class="help-block"></span>
	</div>
</div>
    
answered by 03.05.2017 в 17:21
angularjs synchronous How do I change my user authentication to another column in the db as username in laravel?