Text shifting elements bootstrap
<p>I have the following table using bootstrap when there is too much text:</p>

<p><a href="https://i.stack.imgur.com/IrBrz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IrBrz.png" alt="enter image description here"></a></p>

<p>It pushes the column down and doesn't even come close to filling the whole area before pushing the size of the row... Plus the text isn't aligned with itself. I tried text-align in css to fix this but found no answers there. </p>

<p>Here is the <strong>code</strong> for the mess with no additions just generic:</p>

<pre><code>   &lt;div class="container"&gt;
            &lt;table class="table"&gt;
                &lt;thead&gt;
                    &lt;tr&gt;
                        &lt;th&gt;Event&lt;/th&gt;
                        &lt;th&gt;Last Ran&lt;/th&gt;
                        &lt;th&gt;Next Run&lt;/th&gt;
                        &lt;th&gt;Options&lt;/th&gt;
                        &lt;th&gt;Details&lt;/th&gt;
                    &lt;/tr&gt;
                &lt;/thead&gt;
                &lt;tbody&gt;
                    @foreach (PIM5.Web.Models.Event evt in Model.Events)
                    {
                        &lt;tr class=@evt.status&gt;
                            &lt;td&gt;&lt;b&gt;@evt.name&lt;/b&gt;&lt;/td&gt;
                            &lt;td&gt;@evt.lastRan&lt;/td&gt;
                            &lt;td&gt;@evt.nextRun&lt;/td&gt;
                            &lt;td style="max-width: 150px"&gt;
                                @if (evt.options &gt; 0)
                                {
                                    &lt;button type="button" class="btn btn-success"  onclick="doProcessStart('@evt.name')"&gt;Start&lt;/button&gt;
                                    &lt;button type="button" class="btn btn-warning"  onclick="doProcessStop('@evt.name')"&gt;Stop&lt;/button&gt;
                                    &lt;button type="button" class="btn btn-info" onclick="doProcessEdit('@evt.name')"&gt;Edit&lt;/button&gt;
                                }

                                @if (evt.options &gt; 1)
                                {
                                    &lt;button type="button" class="btn btn-success"&gt;Force&lt;/button&gt;
                                }
                                &lt;button type="button" class="btn btn-danger" onclick="doProcessRemove('@evt.name')"&gt;Remove&lt;/button&gt;
                            &lt;/td&gt;
                            &lt;td&gt;@evt.description&lt;/td&gt;
                        &lt;/tr&gt;
                    }
                &lt;/tbody&gt;
            &lt;/table&gt;
            &lt;button class="btn btn-success" onclick="doAddEvent()"&gt;New Event&lt;/button&gt;
        &lt;/div&gt;
</code></pre>

<p>This is what I would like it to do:
<a href="https://i.stack.imgur.com/fcOjR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fcOjR.png" alt="enter image description here"></a></p>

<p><strong>Fill the black box area first before pushing row down</strong> and <strong>never increase the row width and go off screen</strong></p>

<p>Willing to use javascript or anything that will fix this problem.</p>