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.
CodePudding user response：
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" }}>