0

I am currently using the center column of this code for my content. 

    <div class="row ">

        <div class="col-md-3">
        </div>


        <div class="col-md-6">
            <h3>
                <a href="#">Title</a>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
        </div>


        <div class="col-md-3">
        </div>


    </div>

The two <div class="col-md-3">elements are only placed there so the content of <div class="col-md-6"> is centered. Is there another way for me to have a centered box without having two additional empty elements. I assume there is a row attribute I can use or some other approach.

A small minimal example is appreciated. Thanks

William
  • 4,422
  • 17
  • 55
  • 108

2 Answers2

1

The other way is using offset...

<div class="container">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3"></div>
        <div class="col-xs-3"></div>
    </div>
</div>

Demo: http://codeply.com/go/HV3yrjxKtB

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
0

Taken from the docs: add the class .row-centered to the row and .col-centered to the columns.

<div class="container">
    <div class="row row-centered">
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-6 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
        <div class="col-xs-3 col-centered"></div>
    </div>
</div>
YanetP1988
  • 1,346
  • 3
  • 18
  • 43