¿Cómo alinear div al fondo dentro de div con Bootstrap?

Preguntas HTML
⏰ 4 minutos de lectura

Avatar de usuario de Sander Bakker
lijadora

html, body, .sidebar-container, .sidebar-row {
    height: 100%;
}

.sidebar {
    background-color: #2C3544;
}

@media (min-width: 992px) {
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        display: block;
        background-color: #2C3544;
    }
}
img{
    margin: auto;
    display: block;
}
.sidebar-image{
    margin-top: 15px;
}
.sidebar-items{
    margin-top: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid sidebar-container">
    <div class="row sidebar-row">
        <div class="col-md-2 sidebar">
            <div class="container-fluid">
                <div class="col-md-12 sidebar-image">
                    <img src="assets/logo-white.png" width="75px" height="75px"/>
                </div>
            </div>
            <div class="row sidebar-items">
                <div class="col-md-12">
                    <ul class="list-group">
                        <li class="list-group-item">Dashboard</li>
                        <li class="list-group-item">Projects</li>
                        <li class="list-group-item">Statistics</li>
                    </ul>
                </div>
            </div>
            <div class="row align-bottom">
                hafldjalfjsdlfsjdlfsjlfs
            </div>
        </div>
        <div class="col-md-10 offset-md-2 content">
            Main Content
        </div>
    </div>
</div>

Escribí este código HTML/CSS tratando de alinear un div en la parte inferior dentro de otro div:

Quiero alinear este último div en el col-md-2 al fondo de la sidebar-container cuya altura es 100%. Intenté agregar la clase de arranque align-bottom pero de alguna manera esto no funciona. ¿Podría alguien ayudarme?

  • Posible duplicado de Bootstrap 3 Alinear texto en la parte inferior de Div

    – robo

    22 oct 2017 a las 18:06

  • @Rob No, esto es alinear un div dentro de un div, no texto al final de un div

    – Sander Baker

    22 oct 2017 a las 18:07

  • El texto está dentro de un div, pero hay otros duplicados de su pregunta. ¿Buscaste SO antes de publicar?

    – robo

    22 oct 2017 a las 18:07

  • @Rob No se trata del texto, se trata de alinear el DIV dentro del otro DIV hacia abajo. Sí, busqué SO

    – Sander Baker

    22 oct 2017 a las 18:09

Supongamos que tiene 2 divs. Div A (Exterior) y Div B (Interior). Para lograr su tarea, simplemente coloque el código Div B en el código Div A y en la clase CSS Div B agregue esto 

position : absolute
bottom   : 0

  • Problema: Pero entonces el Div interno ya no está centrado. Irá a la parte inferior izquierda.

    – Don Cheadle

    10 sep 2019 a las 15:02

  • Así que si estás usando bootstrap4 así que solo agrega la clase justify-content-center en div exterior. Esto centrará el div interno.

    – Fahad Subzwari

    4 de noviembre de 2020 a las 4:49

avatar de usuario de kelly1025
kelly1025

También puede simplemente usar bootstrap flexbox para hacer esto.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<div class="d-flex align-items-start flex-column bg-success" style="height: 200px;">
  <div class="mb-auto p-2">Flex item-1</div>
  <div class="p-2">Flex item-2</div>
  <div class="p-2">Flex item-3</div>
</div>

<div class="d-flex align-items-end flex-column bg-info" style="height: 200px;">
  <div class="p-2">Flex item-a</div>
  <div class="p-2">Flex item-b</div>
  <div class="mt-auto p-2">Flex item-c</div>
</div>

alinear elementos a la izquierda o a la derecha asegúrese de incluir todo el d-flex align-items-end flex-column en el elemento principal y elija inicio o fin dependiendo de si desea que se alinee a la izquierda o a la derecha.

alinear elemento a la parte inferior Entonces, usa mt-auto en el div que desea pegar en la parte inferior del padre.

  • ¿Hay alguna manera de hacer esto pero alinearlo con el centro del div principal?

    – rvbarreto

    21 de agosto de 2019 a las 19:36

  • La documentación no ofrece una opción para alinear en el medio, pero podría intentar justificar el centro de contenido. Sin embargo, siento que eso podría no funcionar. Necesitaría ver su código para entender lo que está tratando de hacer.

    – kelly1025

    22 de agosto de 2019 a las 20:39

Cuando uso el sistema de cuadrícula Bootstrap, mi solución de acceso es así:

  • agregar d-flex a cada col-*
  • agregar d-flex flex-column a cada card-body
  • agregar mt-auto mx-auto hasta el último elemento (o último división de elementos) quiero quedarme hasta el final

En mi opinión, esto evita más problemas de estilo.

Documentación relevante:

  1. Alineación flexible en Bootstrap 5.0: https://getbootstrap.com/docs/5.0/utilities/flex/#align-items
  2. Alineación vertical en Bootstrap 5.0: https://getbootstrap.com/docs/5.0/utilities/vertical-align/

Código relevante:
Lo que me funcionó para alinear un div (de texto) en la parte inferior de una fila/contenedor

<div class="d-flex align-content-end flex-wrap mb-2">
    <span class="display-4 fw-bold text-black text-start mt-0 mb-0">Active Mural Projects</span>
</div>

¿Ha sido útil esta solución?