Table column sizing
<p>In <code>Bootstrap 3</code>,  I could apply <code>col-sm-xx</code> to the <code>th</code> tags in the <code>thead</code> and resize table columns at will. However this doesn't work in bootstrap 4. How can I achieve something like this in bootstrap 4?</p>

<pre><code>&lt;thead&gt;
&lt;th class="col-sm-3"&gt;3 columns wide&lt;/th&gt;
&lt;th class="col-sm-5"&gt;5 columns wide&lt;/th&gt;
&lt;th class="col-sm-4"&gt;4 columns wide&lt;/th&gt;
&lt;/thead&gt;
</code></pre>

<p>Looking at the codeply provided it doesn't size properly, especially if you add some data to the table. See how this runs:</p>

<pre><code>&lt;div class="container" style="border: 1px solid black;"&gt;
    &lt;table class="table table-bordered"&gt;
    &lt;thead&gt;
        &lt;tr class="row"&gt;
            &lt;th class="col-sm-3"&gt;3 columns wide&lt;/th&gt;
            &lt;th class="col-sm-5"&gt;5 columns wide&lt;/th&gt;
            &lt;th class="col-sm-4"&gt;4 columns wide&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;123&lt;/td&gt;
            &lt;td&gt;456&lt;/td&gt;
            &lt;td&gt;789&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
&lt;/div&gt;
</code></pre>