Nicolas Barlogis Nicolas Barlogis - 4 months ago 24
CSS Question

Centering text in row with bootstrap grid

I was starting to write a mock-up for a project. Basically, I use bootstrap grids to get a structure like this:

<div class="container-fluid">
<div class="row">
<div class="col-xs-2">...</div>
<div class="col-xs-6">Main Title</div>
<div class="col-xs-4">...</div>
</div>
</div>


Here is a complete fiddle: https://jsfiddle.net/f8fn9Los/4/

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?

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.

Thanks!

Answer

See you have already used .text-center on you .project-name which align text to center, so what I could suggest is that try pseudo selector ::before as below,

.text-center::before{
  content:"";
  margin-left:calc(100% - 75%);
}