Space between elements in a column react boostrap

Question

I want there to be many small buttons that go across the entire screen. My setup is currently like this

<Row>
    <Col>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        <label className="btn btn-light btn-sm" style={{fontSize: "10px" }}>button text</label>
        ... and so on
    </Col>
</Row>

The effect is achieved, however, the buttons are all touching each other. Is there any way to force a padding around individual elements of a Column? I can't seem to figure out where to put it. Thanks.

Answer 1

You have many possibilities. You could use margin or padding or - what I would prefer - use flexbox with gap property:

• You could use given bootstrap classes and make Col a flexbox and use the gap property: <Col className="d-flex gap-2">
• There is also a component for this called Stack: <Stack direction="horizontal" gap={2}>
• Or, if you need custom gap size, use css in any way directly. For example with inline styles: <Col className="d-flex" style={{ gap: "13px" }}>

https://codesandbox.io/s/beautiful-darkness-91d2ho