react bootstrap make col disapear in small screens
Using React Bootstrap to Make Columns Disappear on Small Screens
To make a column disappear on small screens using React Bootstrap, you can use the hidden
prop provided by the Col
component. Setting the hidden
prop to sm
will hide the column on small screens. Here's an example of how to achieve this:
import React from 'react';
import { Container, Row, Col } from 'react-bootstrap';
const ExampleComponent = () => {
return (
<Container>
<Row>
<Col>Column 1</Col>
<Col sm={{ span: 0, offset: 0 }}>Column 2 (hidden on small screens)</Col>
</Row>
</Container>
);
};
export default ExampleComponent;
In this example, the second column will be hidden on small screens due to the sm={{ span: 0, offset: 0 }}
configuration.