Diseño de canales 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 Gutters Layout en ReactJS MDBootstrap. Gutters Layout se usa para establecer el relleno entre columnas en el sistema de cuadrícula Bootstrap que se usa para espaciar y alinear el contenido de manera receptiva.

Sintaxis:

<MDBRow className="gx-1">GeeksforGeeks</MDBRow>

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 Gutters Layout.

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 Gutters Layout</h4>
  
      <MDBRow className='bg-primary rounded text-light gx-5'>
        <MDBCol md='2' className='col-example'>
          Grid System 1
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Grid System 2
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Grid System 3
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Grid System 4
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Grid System 5
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Grid System 6
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  
  );
}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo hacer un diseño de canalones verticales.

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 Gutters Layout</h4>
  
      <br/>
      <br/>
      <MDBRow className='bg-primary rounded text-light gy-5'>
        <MDBCol md='2' className='col-example'>
          Gutters 1
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Gutters 2
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Gutters 3
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Gutters 4
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Gutters 5
        </MDBCol>
        <MDBCol md='2' className='col-example'>
        Gutters 6
        </MDBCol>
      </MDBRow>
    </MDBContainer>
  
  );
}

Producción:

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