Search code examples
reactjslayoutreactstrap

Reactstrap Row and Col are not working as expected

I use reactstrap and i want to display 2 elements in a row, but i get a column: screenshot

This is my code:

export default class Intro extends Component {
    render() {
        return (
            <Container>
                <Row>
                    <Col>HOO</Col>
                    <Col>BAA</Col>
                </Row>
            </Container>
        );
    }
}

function App() {
    return (
            <Intro />
    );
}

I'm new in React. Where could I miss something?

Solution

  • Probably you are not importing Bootstrap CSS in the index.js file, you should add:

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

    at the top of index.js or App.js file