Align horizontally on opposite sides buttons with bootstrap

Navigation
1

I have a form in which you can perform three actions: Enter employee, cancel and Save.

I use bootstrap to create the form and the buttons as I show in the image

The problem is that I would like the three buttons aligned horizontally at the same level (not as shown in the figure in which the employee input button is higher) and always leave the input button used on the left side and both remaining buttons on the right side and that by showing them at a lower resolution the three are aligned vertically one under the other ... but I can not get it.

This is the code of the buttons I use MVC ASP.NET with razor views engine 

// Boton Ingresar Empleado
                    <div class="form-group">
                        <div class="col-md-10 col-md-offset-4">
                            <div class="col-md-10">
                                <input type="submit" value="Ingresar Empleado" class="btn btn-primary" id="sentInfo" />
                            </div>
                    </div>
                  </div>

                // Boton Cerrar y Guardar Formulario
                <div class="form-group">
                    <div class="col-md-10 col-md-offset-7">
                        <button type="button" onclick="location.href='@Url.Action("TipoEvento", "Home")'" class="btn btn-danger" id="btn-cancelar">
                            Cancelar
                            <span class="glyphicon glyphicon-remove-sign"></span>
                        </button>

                        <button type="submit" value="Guardar" class="btn btn-primary">
                            Guardar
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        </button>
                    </div>
                </div>

and the form I define it like this: 

<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-2">
    
asked by Pablo Mayora 31.03.2017 в 19:22
source

3 answers

0

The first problem I see is that Bootstrap gives you 12 columns and for the first button you are using 14 (4 of offset and 10 for the element), which makes it "saturate" and you do not let the rest of elements are distributed horizontally.

Second: Bootstrap follows the philosophy mobile-first , so one tip is that the minimum size for the elements you must define it with col-xs-* to ensure that it will always look the same, and from there scales up ( col-sm-* , col-md-* and col-lg-* ).

Third: Bootstrap already has a way to send the content to the right: .pull-right , only with the inconvenience that you have to make sure that there is something else within where you are going to contain it. If there is nothing, you must put at least a &nbsp; to respect the space, because if you do not do everything you have below it will run a little upwards. 

<div class="row">
    <div class="col-xs-12">
        // Boton Ingresar Empleado
        <div class="col-xs-6">
            <div class="form-group">
                <input type="submit" value="Ingresar Empleado" class="btn btn-primary" id="sentInfo" />
            </div>
        </div>
        // Boton Cerrar y Guardar Formulario
        <div class="col-xs-6">
            <div class="form-group">
                &nbsp;
                <div class="pull-right">
                    <button type="button" onclick="location.href='@Url.Action("TipoEvento", "Home")'" class="btn btn-danger" id="btn-cancelar">
                        Cancelar <span class="glyphicon glyphicon-remove-sign"></span>
                    </button>
                    <button type="submit" value="Guardar" class="btn btn-primary">
                        Guardar <span class="glyphicon glyphicon-chevron-right"></span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
    
answered by 06.04.2017 / 19:09
source
0

It can be done with the classes that bootstrap ( .text-align and .col ): 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-6 col-sm-6 col-xs-6 text-left">
      <button class="btn btn-primary">Ingresar empleado</button>
    </div>
    <div class="col-md- col-sm-6 col-xs-6 text-right">
      <button class="btn btn-danger">Cancelar
         <span class="glyphicon glyphicon-remove-sign"></span>
      </button>
      <button class="btn btn-primary">Guardar
         <span class="glyphicon glyphicon-chevron-right"></span>
      </button>
    </div>
  </div>
</div>
    
answered by 31.03.2017 в 19:37
0

Maybe using style="float: left;" and style="float: right;" 

<div class="col-md-10 col-md-offset-4" style="float: left;">

<div class="col-md-10 col-md-offset-7" style="float: right;">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>


<div class="form-group">
                        <div class="col-md-10 col-md-offset-4" style="float: left;">
                            <div class="col-md-10" >
                                <input type="submit" value="Ingresar Empleado" class="btn btn-primary" id="sentInfo" />
                            </div>
                    </div>
                  </div>

                <div class="form-group">
                    <div class="col-md-10 col-md-offset-7" style="float: right;">
                        <button type="button" onclick="location.href='@Url.Action("TipoEvento", "Home")'" class="btn btn-danger" id="btn-cancelar">
                            Cancelar
                            <span class="glyphicon glyphicon-remove-sign"></span>
                        </button>

                        <button type="submit" value="Guardar" class="btn btn-primary">
                            Guardar
                            <span class="glyphicon glyphicon-chevron-right"></span>
                        </button>
                    </div>
                </div>
    
answered by 31.03.2017 в 20:29
Web API in ASP.NET with OData - Problem in the view Scroll two fragments into an activity