¿Cómo puedo hacer que mis botones Bootstrap de Twitter se alineen a la derecha?

En twitter bootstrap 3 prueba la clase pull-right

class="btn pull-right"

La clase"pull-right" puede no ser la correcta porque in usa "float: right" en lugar de text-align.

Revisando el archivo css bootstrap 3 encontré la clase "text-right" en la línea 457. Esta clase debería ser la forma correcta de alinear el texto a la derecha.

Algún código:

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

Actualización 2018-Bootstrap 4.0.0

La clase pull-right es ahora float-right en Bootstrap 4...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

Http://www.codeply.com/go/nTobetXAwb

También es mejor no alinear la lista ul y usar elementos de bloque para las filas.

Es float-right todavía no funciona?

Recuerde que Bootstrap 4 ahora es flexbox, y muchos elementos son display:flex que pueden evitar que float-right funcione. En algunos casos, la util clases como align-self-end o ml-auto trabajan para alinear a la derecha los elementos que están dentro de un contenedor flexbox como un Bootstrap 4 .fila, Tarjeta o Nav.

También recuerde que text-right todavía funciona en elementos en línea.

Bootstrap 4 align right examples

Bootstrap 3

Utilice la clase pull-right.

Use la etiqueta button en lugar de input y use la clase pull-right.

pull-right la clase arruina totalmente tus dos botones, pero puedes arreglar esto definiendo un margen personalizado en el lado derecho.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

Luego use el siguiente CSS para la clase

.RbtnMargin { margin-left: 5px; }

Añadiendo a la respuesta aceptada, cuando se trabaja dentro de contenedores y columnas que han construido en el relleno de bootstrap, a veces tengo una columna estirada completa con un div hijo que hace la tracción para ser el camino a seguir.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

Alternativamente, haga que todas sus columnas se sumen a su número total de columnas de cuadrícula (12 por defecto) junto con tener la primera columna desplazada.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

Lo siento por responder a una pregunta anterior ya respondida, pero pensé en señalar un par de razones por las que su jsfiddle no funciona, en caso de que otros lo revisen y se pregunten por qué la clase pull-right como se describe en la respuesta aceptada no funciona allí.

1. la url al bootstrap.el archivo css no es válido. (tal vez funcionó cuando hiciste la pregunta).
2. debe agregar el atributo: type = "button" a su elemento de entrada, o no se representará como un button-it se representará como un cuadro de entrada. Mejor aún, utilice el elemento <button> en su lugar.
3. Además, debido a que pull-right usa flotadores, obtendrá un cierto escalonamiento del diseño del botón porque cada LI no tiene suficiente altura para acomodar la altura del botón. Agregar un poco de css line-height o min-height a la LI solucionaría eso.

Violín de trabajo: http://jsfiddle.net/3ejqufp6 /

<ul>
  <li>One <input type="button" class="btn pull-right" value="test"/></li>
  <li>Two <input type="button" class="btn pull-right" value="test2"/></li>
</ul>

(También agregué un ancho mínimo a los botones ya que no podía soportar el aspecto de un aspecto irregular justificado a la derecha de los botones debido a los anchos variables :))

Usar el ayudante Bootstrap pull-right no funcionó para nosotros porque usa float: right, lo que obliga a inline-block elementos a convertirse en block. Y cuando los .btn s se convierten en block, pierden el margen natural que inline-block les proporcionaba como elementos cuasi-textuales.

Así que en su lugar usamos direction: rtl; en el elemento padre, lo que hace que el texto dentro de ese elemento se distribuya de derecha a izquierda, y que los elementos inline-block también se distribuyan de derecha a izquierda. Usted puede utilizar MENOS como el siguiente para evitar que los niños sean colocados rtl también:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

Y úsalo como:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

Aplique la clase pull-right para el botón. http://getbootstrap.com/css/#helper-classes-floats - > Clases auxiliares

Este enlace ayudará

Tirar a la derecha se depreció a partir de v3.1.0 . Sólo un aviso.

Http://getbootstrap.com/components/#callout-dropdown-pull-right

Puede probar un CSS personalizado aparte del CSS bootstrap para ver si hay cambios. Try

.move-rigth{
    display: block;
    float: right;
}

Si funciona, entonces puede intentar manipular lo que tiene o agregar otro formato a esto y lograr lo que desea. Porque estás usando bootstrap no significa que si no te ofrece lo que quieres, entonces solo lo administras. Usted está trabajando con sus códigos y por lo tanto le ordena que haga lo que dice. ¡Salud!

<ul>
    <li class="span4">One <input class="btn btn-small" value="test"></li>
    <li class="span4">Two <input class="btn btn-small " value="test2"</li>
</ul>

Acabo de usar layout..aplicar estilos para li..

O

<ul>
    <li>One <input class="btn" value="test"></li>
    <li>Two <input class="btn" value="test2"</li>
</ul>

En CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

Ahora necesitas agregar .menú desplegable-derecho a la existente .elemento de menú desplegable. tirar a la derecha ya no es compatible. Más información aquí http://getbootstrap.com/components/#btn-dropdowns

También puede usar columnas en blanco para dar espacios a la izquierda

Como

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

Demo :: Jsfiddle demo

Para la documentación de bootstrap 4

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>