Speakers with bootstrap

Question

Speakers with bootstrap

Asked 5 years, 9 months ago

Viewed 296 times

1

I have a question about the use of speakers in the bootstrap. In my current code I have the layout below, however, I would like to put the four fields side by side, I can already divide the other fields in two columns, but, for aesthetic question I would like to know how I can proceed. Current layout:

Idealized layout:

Follows my code:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--Alinhamento de Campos-->
<input id="id_contrato" type="hidden" class="form-contratol" name="id_contrato">
<!--Primeira Coluna-->
<div class='row' align = left>
<!--Alinhamento de Campos Primeira Coluna-->
<div class='col-sm-6'>
								
<!--CNPJ-->
<!-- COLUNA CNPJ-->
<input type='hidden' id="id_contrato" name="contrato">
								
<!--Campo Situaçao-->
<label for="razao_social">Razão Social:</label>
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
</div>
<input type='text' name='razao_social' id="id_razao_social" class="form-control"  autofocus required autofocus><br>
</div>
<!-- COLUNA CNPJ-->
<br>
<!--Campo NOME_FANTASIA-->
<label for="razao_fantasia">Nome Fantasia:</label>
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
</div>
<input type='text' name='razao_fantasia' id="id_razao_fantasia" class="form-control" required autofocus><br>
</div>
<!--Fim Campo NOME_FANTASIA-->
<br>
<!-- COLUNA CNPJ-->
<label for="razao_social">CNPJ:</label>
<div class="input-group col-lg-6">
<div class="input-group-addon">
<span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
</div>
<input type='text' name='cnpj' id="cnpj" class="form-control" autofocus placeholder='00.000.000/0000-00' required autofocus><br>
</div>
<!--Fim Campo CNPJ-->
<br>
<!--Campo CAMPO 1-->
<label for="campo1">CAMPO 1:</label>
<div class="input-group col-md-6 col-lg-6">
<div class="input-group-addon">
<span class="glyphicon glyphicon-road" id="basic-addon-campo1"></span>
</div>
<input type='text' name='campo1' id="campo1" class="form-control" required autofocus placeholder='Ex.: Rua, Avenida, Condomínio e etc' required autofocus><br>
</div>
<!--FIM Campo CAMPO 1-->
								
<!--Campo CAMPO 2-->
<label for="campo1">CAMPO 2:</label>
<div class="input-group col-md-6 col-lg-6">
<div class="input-group-addon">
<span class="glyphicon glyphicon-road" id="basic-addon-campo2"></span>
</div>
<input type='text' name='campo2' id="campo2" class="form-control" required autofocus placeholder='Ex.: Rua, Avenida, Condomínio e etc' required autofocus><br>
</div>
<!--FIM Campo CAMPO 2-->
								
<!--Campo CAMPO 3-->
<label for="campo1">CAMPO 3:</label>
<div class="input-group col-md-6 col-lg-6">
<div class="input-group-addon">
<span class="glyphicon glyphicon-road" id="basic-addon-campo3"></span>
</div>
<input type='text' name='campo3' id="campo3" class="form-control" required autofocus placeholder='Ex.: Rua, Avenida, Condomínio e etc' required autofocus><br>
</div>
<!--FIM Campo CAMPO 3-->
								
<!--Campo CAMPO 4-->
<label for="campo1">CAMPO 4:</label>
<div class="input-group col-md-6 col-lg-6">
<div class="input-group-addon">
<span class="glyphicon glyphicon-road" id="basic-addon-campo4"></span>
</div>
<input type='text' name='campo4' id="campo4" class="form-control" required autofocus placeholder='Ex.: Rua, Avenida, Condomínio e etc' required autofocus><br>
</div>
<!--FIM Campo CAMPO 4-->
								
<!--Final ROW De Posiçao Primeira Coluna-->
</div>
<!--Final ROW De Posiçao Primeira Coluna-->
<!--Fim Primeira Coluna-->
							
<!--ROW De Posiçao Segunda Coluna-->
<div class='row'>
<!--Alinhamento de Campos Segunda Coluna-->
<div class='col-sm-3 col-lg-4'>
									
<!--Fim Campo Situaçao-->
<!--Campo Data Prevista-->
									
<!--Data da Solicitaçao-->
<label for="data" class="control-label" >
<br>Data de Ativação: <br></label>
<div class="input-group col-lg-10">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
<div><input style="background-color: #008B45; color: white; text-align:center;" readonly class="form-control" type="text"
name="data" id="id_data"></div></div>
<!--Fim Data da Solicitaçao-->
										
<!--Data da Solicitaçao-->
<label for="data" class="control-label" >
<br>Data de Vencimento: <br></label>
<div class="input-group col-lg-10">
<div class="input-group-addon">
<span class="	glyphicon glyphicon-calendar"></span>
</div>
<div><input style="background-color: #ec8a24; color: white; text-align:center;" readonly class="form-control" type="text"
name="data" id="id_data"></div></div>
<!--Fim Data da Solicitaçao-->	
											
<!--Se Houve Alteraçao no Registro Mostra a Data-->
											
											
<label for="data_alt" class="control-label" >
<br>Data de Alteração: <br></label>
<div class="input-group col-lg-10">
<div class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</div>
<div><input style="background-color: #CD2626; color: white; text-align:center;"
readonly class="form-control" type="text"
name="data_alt" id="id_data_alt"></div></div>
<!--Se Houve Alteraçao no Registro Mostra a Data-->
												
<!--Campo Observações-->
<label for="obs" class="control-label" >
<br>Observações:<br></label>
<div class="input-group">
<div class="input-group-addon">
<span class="glyphicon glyphicon-pencil" id="basic-addon-obs"></span>
</div>
<textarea name="obs" id="id_obs" style="width: 304px; height: 246px; margin: 0px;" class="form-control" placeholder="Nenhuma Observação" onkeyup="limite_obs(this)"><?php echo $obs; ?></textarea>
<script>
function limite_obs(obj) {
obj.value = obj.value.substring(0,1000);
}
</script>
</div>
<!--Fim Campo Observações-->
												
<!--Final ROW De Posiçao Segunda Coluna-->
</div>
</div>
<!--Final ROW De Posiçao Segunda Coluna-->
<!--Fim Segunda Coluna-->
</div>

But what are the 4 fields that you want to put side by side the Lada? And you want them to stand side by side at all resolutions or on small screens is to stay one below the other??

– hugocsl

2019/03/20 at 00:03
I would like the 4 fields according to the image and if possible in all resolutions.

– Carlos

2019/03/20 at 11:45

1 answer

Browser other questions tagged html5 twitter-bootstrap

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

by hugocsl • **65,517** points · Answer 1 · 2019-03-20T12:07:13+00:00

Basically just you subdivide your grid within the .row. Your HTML had several problems, like some <br> unnecessary and a .row inside of another .row without needing, and besides its content was not within a container grid. Another problem tb is that you put a fixed value in PX for the textarea, but the correct is to leave it with 100% of the column width.

This is the grid of the image above

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
        <div class="col-xs-3"></div>
    </div>
</div>

In case you want 4 columns in all resolutions you need to divide your grid into 4 columns of 3. (4x3=12). Then it would be .container>.row>.col-xs-3(*4). I recommend that you read the BS3 Grid documentation https://getbootstrap.com/docs/3.4/css/#grid

See the corrected code

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />


  <div class="container-fluid">
    <input id="id_contrato" type="hidden" class="form-contratol" name="id_contrato">
    <!--Primeira Coluna-->
    <div class='row'>
      <!--Alinhamento de Campos Primeira Coluna-->
      <div class='col-xs-3'>

        <!--CNPJ-->
        <!-- COLUNA CNPJ-->
        <input type='hidden' id="id_contrato" name="contrato">

        <!--Campo Situaçao-->
        <label for="razao_social">Razão Social:</label>
        <div class="input-group">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-user" id="basic-addon-razao_social"></span>
          </div>
          <input type='text' name='razao_social' id="id_razao_social" class="form-control" autofocus required autofocus><br>
        </div>
        <!-- COLUNA CNPJ-->
        <br>
        <!--Campo NOME_FANTASIA-->
        <label for="razao_fantasia">Nome Fantasia:</label>
        <div class="input-group">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-user" id="basic-addon-nome_fantasia"></span>
          </div>
          <input type='text' name='razao_fantasia' id="id_razao_fantasia" class="form-control" required autofocus><br>
        </div>
        <!--Fim Campo NOME_FANTASIA-->
        <br>
        <!-- COLUNA CNPJ-->
        <label for="razao_social">CNPJ:</label>
        <div class="input-group col-lg-6">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-info-sign" id="basic-addon-cpf"></span>
          </div>
          <input type='text' name='cnpj' id="cnpj" class="form-control" autofocus placeholder='00.000.000/0000-00'
            required autofocus><br>
        </div>
      </div>
      <!--Fim Campo CNPJ-->
      <!-- <br> -->
      <div class='col-xs-3'>
        <!--Campo CAMPO 1-->
        <label for="campo1">CAMPO 1:</label>
        <div class="input-group col-md-6 col-lg-6">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-road" id="basic-addon-campo1"></span>
          </div>
          <input type='text' name='campo1' id="campo1" class="form-control" required autofocus placeholder='Ex.: Rua, Avenida, Condomínio e etc'
            required autofocus><br>
        </div>
        <!--FIM Campo CAMPO 1-->

        <!--Campo CAMPO 2-->
        <label for="campo1">CAMPO 2:</label>
        <div class="input-group col-md-6 col-lg-6">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-road" id="basic-addon-campo2"></span>
          </div>
          <input type='text' name='campo2' id="campo2" class="form-control" required autofocus placeholder='Ex.: Rua, Avenida, Condomínio e etc'
            required autofocus><br>
        </div>
        <!--FIM Campo CAMPO 2-->

        <!--Campo CAMPO 3-->
        <label for="campo1">CAMPO 3:</label>
        <div class="input-group col-md-6 col-lg-6">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-road" id="basic-addon-campo3"></span>
          </div>
          <input type='text' name='campo3' id="campo3" class="form-control" required autofocus placeholder='Ex.: Rua, Avenida, Condomínio e etc'
            required autofocus><br>
        </div>
        <!--FIM Campo CAMPO 3-->

        <!--Campo CAMPO 4-->
        <label for="campo1">CAMPO 4:</label>
        <div class="input-group col-md-6 col-lg-6">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-road" id="basic-addon-campo4"></span>
          </div>
          <input type='text' name='campo4' id="campo4" class="form-control" required autofocus placeholder='Ex.: Rua, Avenida, Condomínio e etc'
            required autofocus><br>
        </div>
        <!--FIM Campo CAMPO 4-->

        <!--Final ROW De Posiçao Primeira Coluna-->
      </div>
      <!--Final ROW De Posiçao Primeira Coluna-->
      <!--Fim Primeira Coluna-->

      <!--ROW De Posiçao Segunda Coluna-->
      <div class='col-xs-3'>
        <!--Alinhamento de Campos Segunda Coluna-->
        <!-- <div class='col-sm-3 col-lg-4'> -->

        <!--Fim Campo Situaçao-->
        <!--Campo Data Prevista-->

        <!--Data da Solicitaçao-->
        <label for="data" class="control-label">
          <!-- <br> -->
          Data de Ativação:
          <br>
        </label>
        <div class="input-group col-lg-10">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </div>
          <div><input style="background-color: #008B45; color: white; text-align:center;" readonly class="form-control"
              type="text" name="data" id="id_data"></div>
        </div>
        <!--Fim Data da Solicitaçao-->

        <!--Data da Solicitaçao-->
        <label for="data" class="control-label">
          <br>Data de Vencimento: <br></label>
        <div class="input-group col-lg-10">
          <div class="input-group-addon">
            <span class="	glyphicon glyphicon-calendar"></span>
          </div>
          <div><input style="background-color: #ec8a24; color: white; text-align:center;" readonly class="form-control"
              type="text" name="data" id="id_data"></div>
        </div>
        <!--Fim Data da Solicitaçao-->

        <!--Se Houve Alteraçao no Registro Mostra a Data-->


        <label for="data_alt" class="control-label">
          <br>Data de Alteração: <br></label>
        <div class="input-group col-lg-10">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </div>
          <div><input style="background-color: #CD2626; color: white; text-align:center;" readonly class="form-control"
              type="text" name="data_alt" id="id_data_alt"></div>
        </div>
      </div>
      <!--Se Houve Alteraçao no Registro Mostra a Data-->
      <div class='col-xs-3'>
        <!--Campo Observações-->
        <label for="obs" class="control-label">
          <!-- <br> -->
          Observações:
          <br>
        </label>
        <div class="input-group">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-pencil" id="basic-addon-obs"></span>
          </div>
          <textarea name="obs" id="id_obs" style="width: 100%; height: 246px; margin: 0px;" class="form-control"
            placeholder="Nenhuma Observação" onkeyup="limite_obs(this)"><?php echo $obs; ?></textarea>

        </div>
        <!-- </div> -->
      </div>
    </div>
  </div>