Centering col within a row BOOTSTRAP

Question

I am having issues centering a column within a row. Here is what my html looks like:

<div class="row">
  <div class="col-sm-12 parent-col">
    <div class="col-sm-2 child-col">itemOne</div>
    <div class="col-sm-2 child-col">itemTwo</div>
    <div class="col-sm-2 child-col">itemThree</div>
    <div class="col-sm-2 child-col">itemFour</div>
    <div class="col-sm-2 child-col">itemFive</div>
  </div>
</div>

I have attemtped:

.parent-col { float: none; margin: 0 auto; } //This did not work
.child-col { float: none; display: inline-block; } //This works, but I then lose responsiveness.
.col-sm-offset-1 on parent-col. //This also works. However, it is not EXACTLY centered. One side is about 4px larger than the other.

Any other ideas on how or possibly why I am not able to center col or retain responsiveness?

I'm assuming you are referring to overriding the `float` property. If you are, it is simply because this is the suggested method for centering a `col` within a row. The internet is PLAGUED with this response. So obviously I figured... it is the way to go. If you have a suggestion on how to accomplish my dilemma, I would greatly appreciate it. — Nappstir, Dec 01 '16 at 00:15
Bootstrap rules say that `col-*` can only be a child of a `row` so you need to insert a `row` directly inside the `col-sm-12` — DavidG, Dec 01 '16 at 00:15

score 1 · Answer 1 · answered Dec 01 '16 at 00:19

If you are trying to get the child columns centered in the parent column, you can add the offset to the first child column:

<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-offset-1 col-sm-2">itemOne</div>
      <div class="col-sm-2">itemTwo</div>
      <div class="col-sm-2">itemThree</div>
      <div class="col-sm-2">itemFour</div>
      <div class="col-sm-2">itemFive</div>
    </div>
  </div>
</div>

Putting the offset on the parent column effectively puts 13 columns in that row so you want to make the child columns add up to 12 (1 offset, 10 total in the columns, then the remainder which will be 1 = 12)

score 1 · Answer 2 · answered Dec 01 '16 at 00:22

Bootstrap's grid is based on 12 columns. 12/5 = 2.4, and bootstrap doesn't really have that kind of columns-width :)

Option #1 - add 1 column on each side (using col-sm-1).

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-12 parent-col">
    <div class="col-sm-1 child-col"></div>
    <div class="col-sm-2 child-col">itemOne</div>
    <div class="col-sm-2 child-col">itemTwo</div>
    <div class="col-sm-2 child-col">itemThree</div>
    <div class="col-sm-2 child-col">itemFour</div>
    <div class="col-sm-2 child-col">itemFive</div>
    <div class="col-sm-1 child-col"></div>
  </div>
</div>

Option #2 - add an offset on the first-column:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-12 parent-col">
    <div class="col-sm-2 child-col col-md-offset-1">itemOne</div>
    <div class="col-sm-2 child-col">itemTwo</div>
    <div class="col-sm-2 child-col">itemThree</div>
    <div class="col-sm-2 child-col">itemFour</div>
    <div class="col-sm-2 child-col">itemFive</div>
  </div>
</div>

option #3 - if you really want and I advise against it you can override the grid system:

@media (min-width: 768px) {
  .grid-of-10 .col-sm-2 {
    width: 20%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-sm-12 parent-col grid-of-10">
    <div class="col-sm-2 child-col">itemOne</div>
    <div class="col-sm-2 child-col">itemTwo</div>
    <div class="col-sm-2 child-col">itemThree</div>
    <div class="col-sm-2 child-col">itemFour</div>
    <div class="col-sm-2 child-col">itemFive</div>
  </div>
</div>

Note - all snippets should be viewed in full-screen.

I have been fighting thi all day. I have 2x4 column and 1x3 so I get a 3 columns using 11 cols of the row, of course it's not centered . Any idea on how to center them on the row — Pablo Palacios, Mar 14 '18 at 01:01
Link to jsfiddle/codepen with an example and I might be able to help — Dekel, Mar 14 '18 at 01:02
This explains it, may be I am missing something. the idea is *how to center those 3 columns* inside the row. https://jsfiddle.net/moplin/4qfrtqd7/3/ — Pablo Palacios, Mar 14 '18 at 01:22
@moplin 1. Read the first two lines in my answer. 2. I don't see any place where you tried to do anything, you just used the regular bootstrap classes, nothing else. How do you think it should work? — Dekel, Mar 14 '18 at 16:42
You can always use non-bootstrap css things, but if you want to use only bootstrap - the answer is "no, you can't". — Dekel, Mar 14 '18 at 18:44
Thank you, anyway. This is a client constraint, so I will have to find a fix or make the designer modify the 3th colum to take 4 col spaces instead of 3. — Pablo Palacios, Mar 14 '18 at 22:45

Centering col within a row BOOTSTRAP

2 Answers2