Different forms on the same line

Asked

Viewed 272 times

1

I have two forms in my code, and HTML gave a line break between the two. I would like both to be printed side by side, to save screen space.

I’d like to know how to do this using CSS or Bootstrap 3.

inserir a descrição da imagem aqui

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
  

<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title text-center">USUARIO, esta solicitação ainda está pendente de sua aprovação!</h3>
    </div>
    <div class="panel-body text-center">

        <form action="/Ti01/AprovaSolicitacao" method="post" novalidate="novalidate">
            <input htmlattributes="{ class = form-control, readonly = readonly }" id="CadastroID" name="CadastroID" type="hidden" value="1">
            <input type="submit" class="btn btn-success btn-finish" name="aprova" value="Aprovar">
        </form>
        <form action="/Ti01/RejeitaSolicitacao" method="post" novalidate="novalidate">
            <input htmlattributes="{ class = form-control, readonly = readonly }" id="CadastroID" name="CadastroID" type="hidden" value="1">
            <input type="submit" class="btn btn-success btn-danger" name="rejeita" value="Rejeitar">
        </form>
    </div>
</div>

html css twitter-bootstrap bootstrap-3

  • Printed that you speak is when printing right on paper, or on screen?

  • Sorry, on the screen really.

1 answer

3


You have to use Grid, row>col and use the class text-left/right to align the btns downtown.

No need for extra CSS inside your panel-body you put a row, and each form in a col-xs-6, then you put it on col the class text-lef or text-right to align the btn

inserir a descrição da imagem aqui

Follow the code below

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />


<div class="panel panel-info">
    <div class="panel-heading">
        <h3 class="panel-title text-center">USUARIO, esta solicitação ainda está pendente de sua aprovação!</h3>
    </div>
    <div class="panel-body text-center">

        <div class="row">
            <div class="col-xs-6 text-right">
                <form action="/Ti01/AprovaSolicitacao" method="post" novalidate="novalidate">
                    <input htmlattributes="{ class = form-control, readonly = readonly }" id="CadastroID" name="CadastroID" type="hidden" value="1">
                    <input type="submit" class="btn btn-success btn-finish" name="aprova" value="Aprovar">
                </form>
            </div>
            <div class="col-xs-6 text-left">
                <form action="/Ti01/RejeitaSolicitacao" method="post" novalidate="novalidate">
                    <input htmlattributes="{ class = form-control, readonly = readonly }" id="CadastroID" name="CadastroID" type="hidden" value="1">
                    <input type="submit" class="btn btn-success btn-danger" name="rejeita" value="Rejeitar">
                </form>
            </div>
        </div>
    </div>
</div>

Browser other questions tagged html css twitter-bootstrap bootstrap-3

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