Centering text in row with bootstrap grid
<p>I was starting to write a mock-up for a project. Basically, I use bootstrap grids to get a structure like this:</p>

<pre><code>&lt;div class="container-fluid"&gt;
  &lt;div class="row"&gt;
    &lt;div class="col-xs-2"&gt;...&lt;/div&gt;
    &lt;div class="col-xs-6"&gt;Main Title&lt;/div&gt;
    &lt;div class="col-xs-4"&gt;...&lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here is a complete fiddle: <a href="https://jsfiddle.net/f8fn9Los/4/" rel="noreferrer">https://jsfiddle.net/f8fn9Los/4/</a></p>

<p>What I want to do is to center the Main title, not in its column but in the whole row. Is there any way to do this, while keeping this grid structure?</p>

<p>Ps: I know I can do this in other ways, but I was just wondering if there is some way to achieve this with grid.</p>

<p>Thanks!</p>