Как сделать так, чтобы мои заметки отображались в нескольких столбцах в приложении React.js с помощью Bootstrap?

Question

Я создал приложение React, которое позволяет генерировать заметки / заметки на доске. Прямо сейчас, когда я добавляю новые заметки, они появляются в одном столбце. Как использовать Bootstrap, чтобы заметки отображались в нескольких столбцах?

Прошу прощения, если мне не хватает заданной информации. Я немного растерялся и не уверен, что включать и не включать.

В моем файле index.js, который я добавил ...

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

В моем файле компонентов доски в настоящее время под моей функцией рендеринга есть следующее:

render() {
   return (
     <div className="board">
     <div className="row">
     <div className="col-sm-6 col-md-4 col-lg- col-xl-2">
    {this.state.notes.map(this.eachNote)}
     </div>
     </div>

     <button onClick={this.addNote.bind(null, "New Note")}
    id="addNote"> Add </button>
     </div>
   )
  }