title: How to style React Bootstrap Table column filter box
body: <p>I have a react-bootstrap-table with column filters. I need the filter boxes to appear at the bottom of the column title</p>
  
  <p>I have tried adding style: <code>{display:block}</code> to each filtering columns but it does not work</p>
  
  <pre><code>function App() {
      const columns = [{
            dataField: 'id',
            text: 'Product ID',
          }, {
            dataField: 'name',
            text: 'Product Name',
            filter: textFilter({style:{display:'block'}})
          }, {
            dataField: 'price',
            text: 'Product Price',
            filter: textFilter({style:{display:'block'}})
          }];
      const [apps, setApps] = React.useState([]);
  
    return (
      &lt;Router basename="/resources/apps"&gt;
        &lt;div className="App"&gt;
  
        &lt;BootstrapTable keyField='id' data={ apps } columns={ columns } filter={ filterFactory() } /&gt;
  
        &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  </code></pre>
  
  <p>I expected it to show the column filter boxes to show below the column titles. But the boxes are appearing next to each column titles</p>