Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 221
Nicolas Barlogis Avatar asked Jul 29 '16 14:07

Nicolas Barlogis


2 Answers

this would be what your looking for.

<section>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 center-block text-center">
        <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
      </div>
    </div>
  </div>
</section>
like image 60
Zachary St Amant Avatar answered Sep 30 '22 05:09

Zachary St Amant


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%);
} 
like image 33
frnt Avatar answered Sep 30 '22 05:09

frnt