function App() {

​

  return (

    <>

    <Container>

      <Row className="justify-content-md-center">

        <Col xs lg="2">

          1 of 3

        </Col>

        <Col md="auto">Variable width content</Col>

        <Col xs lg="2">

          3 of 3

        </Col>

      </Row>

      <Row>

        <Col>1 of 3</Col>

        <Col md="auto">Variable width content</Col>

        <Col xs lg="2">

          3 of 3

        </Col>

      </Row>

    </Container>

    </>

  );

}

export default App;

​

 /**src/App.css**/

​

.border

{

border: 1px solid #e1edec;

​

}

 .bg{

background-color: #03f4fc;

​

}

​

import './App.css';

import 'bootstrap/dist/css/bootstrap.min.css';

import * as React from 'react';

import Container from 'react-bootstrap/Container';

import Row from 'react-bootstrap/Row';

import Col from 'react-bootstrap/Col';

​

​

function App() {

  return (

    <Container>

      <Row>

        <Col sm={8}>sm=8</Col>

        <Col sm={4}>sm=4</Col>

      </Row>

      <Row>

        <Col sm>sm=true</Col>

        <Col sm>sm=true</Col>

        <Col sm>sm=true</Col>

      </Row>

    </Container>

  );

}

​

export default App;

​