1

I'm new to css and bootstrap and I'm trying to place an div content on center of my screen.

Currently I'm planning to do so:

 <div className="container">
    <div className="row">
        <div className="col-sm-4 col-md-4"></div>
        <div className="col-sm-4 col-md-4">
            Center content here
        </div>
        <div className="col-sm-4 col-md-4"></div>
    </div>
</div>

I could able to guess that column's are splitted into 12. So I'm just splitting up them by 4 for 3 div's.

I just want to understand whether we can get rid of two div's which just used for calculation purpose here:

<div className="col-sm-4 col-md-4"></div>
<div className="col-sm-4 col-md-4"></div>

Is there any better way?

batman
  • 3,565
  • 5
  • 20
  • 41

2 Answers2

4

You can use offsetting for this (see the col-x-offset-x utility classes):

<div className="container">
  <div className="row">
    <div className="col-sm-4 col-sm-offset-4">
      Center content here
    </div>
  </div>
</div>
George
  • 36,413
  • 9
  • 66
  • 103
  • @George: Thanks, I guess I'm not getting it quite right (even though it works perfectly fine). The columns are split into `12`. So if I give `col-sm-4 col-sm-offset-4` what does that mean? Move only the given `div` by offset `4`? So what about remaining `4` cols? To be frank the documentation text is confusing "For example, .col-md-offset-4 moves .col-md-4 over four columns." – batman May 24 '17 at 15:55
  • @batman Because there are 12 columns in a bootstrap layout, and 12 divided by 3 is 4, "offsetting" the column by 4 columns places the 4-column wide div in the middle. – George May 24 '17 at 15:57
-1

You can use native bootstrap classes that are available, for example:

class="text-center"

class="pagination-centered"
thinhvo0108
  • 2,212
  • 1
  • 13
  • 23
Yuli Gartner
  • 1
  • 1