How can i split a column of list in different rows in bootstrap - reactjs

Question

I am using bootstrap with reactjs. I am getting data from a list of the array, and that data should be display on screen but when I tried I get a list of data in the vertical direction. I want to make Only 4 element in a row and then it should make another row like buttons in the calculator. I tried to do that using bootstrap grid but it did not work.
This is my code. Here I mapped through and passed data to different component
PadButtons = this.props.currentPadBank.map((drumObj, i, padBankArr) => {
return (
<PadButton
key={padBankArr[i].id}
clipId={padBankArr[i].id}
clip={padBankArr[i].url}
keyTrigger={padBankArr[i].keyTrigger}
keyCode={padBankArr[i].keyCode}
/>
);
Then here I display the data
<div id="display">
<button
className="drum-pad btn btn-secondary btn-lg"
onClick={this.playSound}
id={this.props.clipId}
>
<audio id={this.props.keyTrigger} src={this.props.clip} />
{this.props.keyTrigger}
</button>
</div>
This is my codesandbox Link

Answer 1

Make the following changes
In Drumpad.js
<div className="container">
<div className="row">{PadButtons}</div>
</div>
In PadButton.js
<div id={`display-${this.props.keyTrigger}`} className="col-sm-3">
<button
className="drum-pad"
onClick={this.playSound}
id={this.props.clipId}>
<audio id={this.props.keyTrigger} src={this.props.clip} />
{this.props.keyTrigger}
</button>
</div>
See updated https://codesandbox.io/s/7ymd7
Basically, you had to add col-sm-3 class on the element that is being repeated and it must be inside a wrapper row div.