Align button to the right side of select

Asked

Viewed 771 times

3

Good morning, I’m having trouble leaving the button next to the select it always stays below the field, as I can leave it positioned on the right side of the field?

<div class="form-group">
  <label class="col-md-4 control-label" for="Selecione">SERVIÇOS :</label>
  <div class="col-md-4">
    <select name="servico_idservico" class="form-control" id="perfil_id required" >
         <option value="">Selecione</option>
                <% 
                for(Servico sl:f.listarServicosNaoVinculados()){
                %>
                <option value="<%=sl.getIdservico() %>"><%=sl.getNome() %></option>
                <%
                }
                %>
            </select><div class="form-group">
  <label class="col-md-4 control-label" for=""></label>
  <div class="col-md-4">
    <button class="btn btn-primary" type="submit">Confirmar Vinculação</button>
  </div>
</div>
  </div>
</div>
bootstrap-3

4 answers

0

Try this way here:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}

/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 20%;
padding: 10px;
height: 300px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row:after {
 content: "";
 display: table;
 clear: both;
}
</style>
</head>
<body>
   <div class="form-group">
     <div class="row">
       <div class="column" >
          <select name="servico_idservico" class="form-control" id="perfil_id required" >
          <option value="">Selecione</option>
          <% 
          for(Servico sl:f.listarServicosNaoVinculados()){
          %>
          <option value="<%=sl.getIdservico() %>"><%=sl.getNome() %></option>
          <%
          }
          %>
          </select>
         </div>
 <div class="column" >
           <button class="btn btn-primary" type="submit">Confirmar Vinculação</button>
  </div>
 </div>
 </body>

source: https://www.w3schools.com/howto/howto_css_two_columns.asp

0

You can do this without touching the CSS:

<div class="form-group">
    <label class="col-md-4 control-label" for="Selecione">SERVIÇOS :</label>
    <div class="col-md-4">
        <select name="servico_idservico" class="form-control" id="perfil_id required" >
            <option value="">Selecione</option>
            <% 
            for(Servico sl:f.listarServicosNaoVinculados()){
            %>
            <option value="<%=sl.getIdservico() %>"><%=sl.getNome() %></option>
            <%
            }
            %>
        </select>

        <button class="btn btn-primary" type="submit">Confirmar Vinculação</button>

    </div>
</div>

0

Add your CSS to the line display: inline-block;

Example:

.form-group {
  display: inline-block;
  padding-left: 7px;
}

0

You can use the bootstrap class . d-flex I’ll leave the example below. Most likely to solve your problem.

<div class="form-group d-flex">
  <label class="col-md-4 control-label" for="Selecione">SERVIÇOS :</label>
  <div class="col-md-4">
    <select name="servico_idservico" class="form-control" id="perfil_id required" >
         <option value="">Selecione</option>
                <% 
                for(Servico sl:f.listarServicosNaoVinculados()){
                %>
                <option value="<%=sl.getIdservico() %>"><%=sl.getNome() %></option>
                <%
                }
                %>
            </select><div class="form-group">
  <label class="col-md-4 control-label" for=""></label>
  <div class="col-md-4">
    <button class="btn btn-primary" type="submit">Confirmar Vinculação</button>
  </div>
</div>
  </div>
</div>

Browser other questions tagged bootstrap-3

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