Contenedor React-Bootstrap, componente de fila y columna

React-Bootstrap es un marco frontal que se diseñó teniendo en cuenta la reacción. Podemos usar el siguiente enfoque en ReactJS para usar el componente React-Bootstrap Container, Row, Col.

• El componente del contenedor proporciona nuestros deseos
• El componente de fila proporciona una fila en el sistema de cuadrícula
• Col Component proporciona una columna en el sistema de cuadrícula

Accesorios de contenedores:

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• bsPrefijo: CSS

Accesorios de fila:

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• lg: Se utiliza para denotar el
• md: se utiliza para indicar el número de columnas que caben una al lado de la otra en dispositivos medianos ≥ 768
• Se utiliza para indicar el número de columnas que encajarán una al lado de la otra en dispositivos pequeños ≥ 576
• Se utiliza para indicar el número de columnas que encajarán una al lado de la otra en dispositivos extragrandes ≥ 1200
• xs: se utiliza para indicar el número de columnas que caben una al lado de la otra en dispositivos extrapequeños
• se usa para r
• bsPrefijo: CSS

Accesorios de columna:

• as: se puede utilizar como un tipo de elemento personalizado para este componente.
• lg: Se utiliza para denotar el
• md: se utiliza para indicar el número de columnas a abarcar en dispositivos medianos ≥ 768
• Se utiliza para indicar el número de columnas a abarcar en dispositivos pequeños ≥ 576
• Se utiliza para indicar el número de columnas para abarcar en dispositivos extragrandes ≥ 1200
• xs: se utiliza para indicar el número de columnas que se abarcan en dispositivos extrapequeños
• bsPrefijo: CSS

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: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install react-bootstrap 
  npm install bootstrap

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo de componente de contenedor: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Container from 'react-bootstrap/Container';
  
export default function App() {
  return (
    <div style={{ display: 'block',
                  width: 700, padding: 30 }}>
      <h4>React-Bootstrap Container Component</h4>
      <Container
        style={{
          backgroundColor: 'green'
        }}
      >
        <h3>Sample Text, Greetings from GeeksforGeeks</h3>
      </Container>
    </div>
  );
}

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo de componente de fila: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Row from 'react-bootstrap/Row';
  
export default function App() {
  return (
    <div style={{ display: 'block', 
                  width: 700, padding: 30 }}>
      <h4>React-Bootstrap Row Component</h4>
      <Row style={{
        backgroundColor: 'red',
      }}>
        Sample First Row
      </Row>
      <Row style={{
        backgroundColor: 'yellow',
      }}>
        Sample Second Row
      </Row>
      <Row style={{
        backgroundColor: 'green',
      }}>
        Sample Third Row
      </Row>
    </div>
  );
}

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

import React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
  
export default function App() {
  return (
    <div style={{ display: 'block', width: 700, padding: 30 }}>
      <h4>React-Bootstrap Col Component</h4>
      <Row>
        <Col style={{
          backgroundColor: 'red',
        }}>
          Sample First Col
      </Col>
        <Col style={{
          backgroundColor: 'yellow',
        }}>
          Sample Second Col
      </Col>
        <Col style={{
          backgroundColor: 'green',
        }}>
          Sample Third Col
      </Col>
      </Row>
    </div>
  );
}

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

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Referencia: 

• https://react-bootstrap.github.io/layout/grid/#container-props
• https://react-bootstrap.github.io/layout/grid/#row-props
• https://react-bootstrap.github.io/layout/grid/#col-props