CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
AndrewLeonardi
AndrewLeonardi

Reputation: 3512

Center Text Horizontally Using Bootstrap?

I am trying to figure out how to center text horizontally using Bootstrap.

Lets say I had a 12 grid space.

My goal is to have the text take up the middle 8 grid spaces with 2 empty grids on each side.

I used the code below to accomplish horizontal centering however I am curious if there is another way using Bootstrap?

Thanks!

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

Upvotes: 1

Views: 1463

Answers (1)

Aaron Fahey
Aaron Fahey

Reputation: 699

If I'm understanding the question properly, you could use columns with an offset

So to take up the middle eight grid spaces, with two spaces on each side:

<div class="col-md-8 col-md-offset-2">
    <p>Some text here</p>
</div>

And if you want the text centered within the centered column, add the class "text-center" to the paragraph tag.

Upvotes: 3

Related Questions