Cómo colocar dos tarjetas de arranque una al lado de la otra

Las tarjetas son uno de los componentes comunes de cualquier aplicación. Proporcionan patrones de diseño para compilar datos relacionados. Más específicamente, Bootstrap ofrece varias clases para crear y ajustar tarjetas, como "texto de la tarjeta","cabezal","footer","Tarjeta-IMG-TOP", y muchos más. El "texto de la tarjeta"Se utiliza para especificar algún texto en la tarjeta y el"Tarjeta-IMG-TOP"Ajusta la imagen en la parte superior de la tarjeta.

Para ajustar la colocación de los elementos con bootstrap, el "fila" y "columna"Las clases pueden considerarse. La "fila" en bootstrap contiene 12 columnas virtuales, y el "col" determina cuántas de las 12 columnas posibles que desea usar para cada elemento.

Esta publicación enseñará sobre ajustar dos tarjetas de arranque en una página web una al lado de la otra.

Cómo colocar dos tarjetas de arranque una al lado de la otra?

Siga los pasos que se indican a continuación para colocar dos tarjetas de arranque una al lado de.

Paso 1: crear diseño de "contenedor"

Un bootstrap "envase"Es un componente fundamental que posee relleno y alineación para el contenido dentro de un dispositivo específico.

En el archivo HTML, primero, agregue un ""Elemento y asignarlo una clase"envase":

Paso 2: Haz una "fila"

El "filaLa clase se utiliza para contener columnas. Cada fila se divide en una cuadrícula de 12 columnas virtuales.

Dentro del contenedor, coloque un divir con la clase "fila" como sigue:

Paso 3: Establezca dos columnas para dos tarjetas

Dentro de ""Elemento tiene clase"fila", Especifique dos columnas para dos cartas.

Para crear una tarjeta, siga las instrucciones dadas:

• Establecer un ""Etiqueta con la clase"Col-6". Esta clase ajusta una columna estableciendo el número de columnas para que el elemento se extienda.
• Dentro del elemento, agregue otro ""Elemento con la clase"tarjeta". Es un contenedor expandible y flexible que ofrece una variedad de contenido como encabezados, pies de página, color de fondo y muchos más.
• Su ancho se ajusta utilizando la propiedad de ancho.
• Incluir la ""Etiqueta con la clase"Tarjeta-IMG-TOP", Que se utiliza para establecer una imagen en la parte superior de la tarjeta. El "SRC"El atributo especifica la ruta de imagen.
• Para agregar el contenido a la tarjeta, implementa el "cuerpo de cartas"Clase, que contiene el"

  ","

  ", y ""Etiquetas.

• El "

  "Ajusta el título de la tarjeta usando el"título de la tarjeta" clase.

• El "

  "El elemento se asigna con el"texto de la tarjetaClase para establecer el párrafo en la tarjeta.

• Luego, para configurar un botón, use el "btn","BTN-Outline-Primary", y "btn-sm"Clases para crear un botón con un esquema:

Artículos de Linuxhint

Escribimos artículos para educar al mundo!

Visitar enlace

Crear la segunda tarjeta de manera similar a la primera tarjeta que se crea. Esta tarjeta debe ajustarse en la siguiente columna para colocar la segunda tarjeta junto a la primera. Para este propósito, cree un separado ""Contenedor junto con"Col-6" clase:

Videos de Linuxhint

Mira videos tutoriales, por supuesto, gratis!

Visitar enlace

Aquí está la salida generada implementando el código anterior:

Aquí está el código completo:

Artículos de Linuxhint

Escribimos artículos para educar al mundo!

Visitar enlace

Videos de Linuxhint

Mira videos tutoriales, por supuesto, gratis!

Visitar enlace

Hemos demostrado el procedimiento para colocar las dos tarjetas de arranque una al lado de la otra.

Conclusión

Para colocar dos cartas una al lado de la otra, primero, cree un ""Elemento junto con el"fila" clase. Entonces, asigne dos más ""Elementos y asignarles una clase de columna"Col-6". Esto asignará seis columnas a cada tarjeta. Para crear una tarjeta en Bootstrap, el "tarjetaSe utiliza la clase. Este estudio ha explicado el procedimiento para alinear dos tarjetas de arranque una al lado de la otra.