title: How can I get four icons on the same line in the table header with bootstrap table?
body: <p>I have 4 table icons in my table header. First I gonna show you some screenshots: </p>
  
  <p><a href="https://i.stack.imgur.com/nAI3y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nAI3y.png" alt="screen 1"></a></p>
  
  <p>This is the table header with 4 icons. This is a situation when the users has a big screen. </p>
  
  <p>When I resize the window I get something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/vh1ri.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vh1ri.png" alt="resize"></a></p>
  
  <p>Users who has a small screen it will resize. The problem is that the 3th icon goes to the next line. What I wanna achieve is when the users has a small screen or resize the window I want the icons on the same line. </p>
  
  <p>This is my code for my table:</p>
  
  <pre><code>&lt;table class="table table-sm table-bordered"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
       &lt;th&gt;
        &lt;i class="icon-move column-drag"&gt;&lt;/i&gt;Header 1
        &lt;i class="icon-sorting-up table-icon"&gt;&lt;/i&gt;
        &lt;i class="icon-basket table-icon"&gt;&lt;/i&gt;
        &lt;i class="icon-filter table-icon"&gt;&lt;/i&gt;
      &lt;/th&gt; 
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;  
        &lt;td&gt;test&lt;/td&gt;   
      &lt;/tr&gt;   
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And this is my css class for <code>table-icon</code></p>
  
  <pre><code>  .table-icon {
      color: #CFD2DC;
      cursor: pointer;
      font-size: 27px;
      margin-right: -16px;
  }
  </code></pre>
  
  <p>I use a own font package from fontello. </p>
  
  <p>When the user resize the window or has a small monitor how can I get the icons still on the same line? I have used <code>col-xl</code> but didn't work for me. </p>