BootstrapVue es una biblioteca que combina Bootstrap 4 con Vue.js para crear interfaces web de manera más rápida y eficiente.
Layout en BootstrapVue
Container: El contenedor principal que envuelve todo el contenido de tu página. Ayuda a centrar y alinear los elementos.
Row: Dentro del contenedor, puedes dividir tu diseño en filas. Las filas contienen columnas y ayudan a mantener el orden.
Column: Las columnas son las unidades básicas de diseño dentro de las filas. Puedes dividir una fila en hasta 12 columnas, lo que permite una gran flexibilidad en el diseño.
Sistema de Cuadrícula (Grid System) en BootstrapVue
Responsive: El sistema de cuadrícula de BootstrapVue es completamente sensible y se adapta automáticamente a diferentes tamaños de pantalla, desde dispositivos móviles hasta pantallas de escritorio.
Columnas Responsivas: Puedes especificar el tamaño de las columnas para diferentes tamaños de pantalla utilizando clases predefinidas como col-sm, col-md, col-lg, y col-xl.
Anidamiento: Puedes anidar filas dentro de columnas y viceversa para crear diseños más complejos.
Offsets: BootstrapVue también proporciona clases para desplazar columnas horizontalmente, lo que te permite crear diseños asimétricos.
Ordenamiento: Puedes cambiar el orden de las columnas fácilmente en dispositivos de diferentes tamaños usando clases de ordenamiento predefinidas.
Ejemplo:
