Diseño de columnas de ReactJS MDBootstrap

MDBootstrap es una biblioteca de interfaz de usuario de reacción basada en diseño de materiales y bootstrap que se utiliza para crear páginas web atractivas con su componente sencillo y fácil de usar.

En este artículo, sabremos cómo usar el diseño de columnas en ReactJS MDBootstrap. El diseño de columnas permite a los usuarios crear columnas, agregarles estilos y modificarlas según las necesidades del usuario.

Sintaxis:

<MDBCol>...</MDBCol>

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2 : después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, muévase a ella con el siguiente comando.

cd foldername

Paso 3: Instale ReactJS MDBootstrap en su directorio dado.

npm i mdb-ui-kit
npm i mdb-react-ui-kit

Estructura del proyecto: Tendrá el siguiente aspecto.

Paso para ejecutar la aplicación: ejecute la aplicación desde el directorio raíz del proyecto, utilizando el siguiente comando.

npm start

Ejemplo 1: Este es el ejemplo básico que muestra cómo usar el diseño de columnas.

import React from "react";
import {
  MDBContainer, MDBCol, MDBRow
} from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <MDBContainer id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Columns Layout</h4>
      <div class="d-flex align-items-start text-light rounded bg-primary mb-3">
        <MDBCol>GeeksforGeeks</MDBCol>
        <MDBCol>GeeksforGeeks</MDBCol>
        <MDBCol>GeeksforGeeks</MDBCol>
      </div>
      <div class="d-flex align-items-start text-light rounded bg-warning mb-3">
        <MDBCol>React</MDBCol>
        <MDBCol>React</MDBCol>
        <MDBCol>React</MDBCol>
      </div>
      <div class="d-flex align-items-start text-light rounded bg-success mb-3">
        <MDBCol>MDBootstrap</MDBCol>
        <MDBCol>MDBootstrap</MDBCol>
        <MDBCol>MDBootstrap</MDBCol>
      </div>
    </MDBContainer>
  
  );
}

Producción:

Ejemplo 2: en este ejemplo, sabremos cómo agregar margen en el diseño de columnas.

import React from "react";
import {
  MDBContainer, MDBCol, MDBRow
} from "mdb-react-ui-kit";
  
export default function App() {
  return (
    <MDBContainer id='gfg'>
      <h2>GeeksforGeeks</h2>
      <h4>ReactJS MDBootstrap Columns Layout</h4>
  
      <MDBRow className='bg-warning text-light mb-3'>
        <MDBCol md='4' >
          Margin 4
        </MDBCol>
        <MDBCol md='4'>
        Margin 4
        </MDBCol>
      </MDBRow>
  
      <MDBRow className='bg-danger text-light mb-3'>
        <MDBCol md='3'>
        Margin 3
        </MDBCol>
  
        <MDBCol md='3'>
        Margin 3
        </MDBCol>
      </MDBRow>
  
      <MDBRow className='bg-success text-light mb-3'>
        <MDBCol size='auto'>
        Margin auto
        </MDBCol>
  
        <MDBCol size='auto'>
        Margin auto
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  
  );
}

Producción:

Referencia: https://mdbootstrap.com/docs/b5/react/layout/columns/