Bootstrap 3 alinea el texto con la parte inferior de la div

Solución:

Creo que su mejor opción sería utilizar una combinación de posicionamiento absoluto y relativo.

Aquí hay un violín: http://jsfiddle.net/PKVza/2/

dado su html:

<div class="row">
    <div class="col-sm-6">
        <img src="https://foroayuda.es/~/Images/MyLogo.png" alt="Logo" />
    </div>
    <div class="bottom-align-text col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

use el siguiente CSS:

@media (min-width: 768px ) {
  .row {
      position: relative;
  }

  .bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

EDITAR: se corrigieron CSS y JSFiddle para la capacidad de respuesta móvil y se cambió la ID a una clase.

Puedes hacerlo:

CSS:

#container {
    height:175px;
}

#container h3{
    position:absolute;
    bottom:0;
    left:0;
}

Luego en HTML:

<div class="row">
    <div class="col-sm-6">
        <img src="https://placehold.it/600x300" alt="Logo" />
    </div>
    <div id="container" class="col-sm-6">
        <h3>Some Text</h3>
    </div>
</div>

EDITAR: agregue el

Recopilé algunas ideas de otra pregunta SO (en gran parte de aquí y esta página css)

Violín

La idea es usar posicionamiento relativo y absoluto para mover su línea hacia abajo:

@media (min-width: 768px ) {
.row {
    position: relative;
}

#bottom-align-text {
    position: absolute;
    bottom: 0;
    right: 0;
  }}

los display:flex La opción es en este momento una solución para hacer que el div tenga el mismo tamaño que su padre. Esto rompe, por otro lado, las posibilidades de arranque para el salto de línea automático en dispositivos pequeños al agregar col-sx-12 clase. (Esta es la razón por la que se necesita la consulta de medios)

---

---

Utiliza Nuestro Buscador