0

Estoy iniciando en Boostrap y estoy intentando hacer un ejercicio de filas y columnas pero no se donde estoy fallando

<div class="row">
<div class="column">Hola mundo</div>
</div>

se supone que se me debe alinear un poco hacia la derecha pero no lo hace

3 respuestas 3

1

seguramente el alineado que te referías podría ser por la clase .container que agrega unos padding y margenes.

Te recomendarías que veas mas ejemplo, el sistema de grilla de boostrap funciona a través de 12 columnas, cada elemento que crees ocupara la cantidad de columnas que tu definas asignandole al lado de la clase .col-cant_de_columnas. Aquí un pequeño ejemplo

    <div class="container">
      <div class="row">
          <div class="col-6 caja_roja"></div>
          <div class="col-6 caja_azul"></div>  
      </div>
    </div>

También te recomendaría que te fijes los tamaños de pantallas que maneja, para poder utlizar en diferentes tamaños de pantallas.

Documentación de Boostrap - Grid

0

Tienes que indicarle cuantas "columnas" del grid de 12 columnas tomará.

Bootstrap utiliza la siguiente sintaxis: <div class="col-md-6"> donde md será el ancho minimo de un dispositivo para que tome esa cantidad de columnas, y 6 la cantidad de columnas que tomará tu elemento.

1
  • Michi, bienvenido, te saludo y te comento que es importante realices el recorrido de bienvenida para conocer el funcionamiento básico del sitio. Para responder tomo como base el documento Cómo responder.
    – Jorgesys
    Commented el 17 sept. 2017 a las 10:14
0

bueno primero que nada debes revisar la documentación de Boostrap Ejemplos

Ahora lo normal es la siguiente estructura

<div class="container">
  <div class="row">
    <div class="col-12">

      Texto

    </div>
  </div>
</div>

Tambien debes tener en cuenta que la clase por ej: "col-12" es para el 100% de ancho y "col-6" el 50%. Esto lo podes modificar y variar el ancho según la resolución con por ejemplo "col-xs-numero, col-sm-numero, col-md-numero, col-lg-numero"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.