xxxxxxxxxx
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;
xxxxxxxxxx
/**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;