1

I am having trouble centering the columns on bootstrap when the screen is sm or xs.

The fiddle is here https://jsfiddle.net/iggyfiddle/DTcHh/34028/. Here is what I am talking about:

large or medium screen When the screen is large (or medium), I have no problem. It appears centered.

small screen When the screen starts to get smaller, it starts to become noticeable. If you notice, the whole column stack leans to the left, leaving some space on the right (I added red bg for emphasis. Hard to tell when bg is white).

xs screen When screen is xs, it is even more noticeable. Note that everything is leaning to the left, leaving a lot of space on the right.

I saw a popular SO post that addressed similar issue here. The solution suggested float: none; margin: 0 auto;, which I did - but it didn't do anything. I also tried adding center-block class, but the result is still nothing.

What do I have to do to center my columns? My goal is on xs screen, I want to have one column stacked up. When it is on sm screen, I want to have two columns, side-by-side, stacked. Anything larger should have 4 adjacent columns.

Iggy
  • 5,129
  • 12
  • 53
  • 87

4 Answers4

0

It's because you're using a width on the .card. Adding margin: 0 auto to the .card class will solve your issue.

Steven B.
  • 8,962
  • 3
  • 24
  • 45
  • That works! Thanks!! Do you know why adding width on card messed up the alignment? I would have never connect the root cause to be the `width` attribute in the card. – Iggy Jun 20 '17 at 18:21
  • @Iggy Because the `.col-xs-12` has 100% width when it gets to the `xs` breakpoint and the `.card` is only occupying 200px of that. Adding the `margin: 0 auto;` aligns it to the center of it's parent, which is your `col-*-*`. – Steven B. Jun 20 '17 at 18:25
0

I also tried adding center-block class, but the result is still nothing.

That's because you're using bootstrap 3.0. .center-block was added in bootstrap 3.1. If you can upgrade to 3.1 (or even better, the current release 3.3.7), .center-block fixes it.

If not, you can use @media (max-width: 992px) { .card { margin: auto; } }

I used both in my solution below.

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

.col-centered {
  margin: 0 auto;
}

@media (max-width: 992px) {
  .col-centered .card { 
    margin: auto; 
  } 
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
      <div class="card center-block" style="width: 200px;">
        <img class="card-img-top img-circle img-responsive" style="margin:0 auto;" src="http://placekitten.com/g/150/150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title text-center">Card title 1</h4>
          <p class="card-text text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
      <div class="card center-block" style="width: 200px;">
        <div class="card-block">
          <h4 class="card-title text-center">Card title 2</h4>
          <p class="card-text text-justify">Omnichannel CPM call-to-action low hanging fruit branding. Inbound holistic tweens dynamic content branding granular. Mission critical lean content snackable content drone inbound. Leading the pack buzzword flat design click bait B2C conversions millennials. Alignment pass the clap content marketing multiple points of entry context.</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
      <div class="card" style="width: 200px;">
        <img class="card-img-top img-circle img-responsive" style="margin:0 auto;" src="http://placekitten.com/g/150/150" alt="Card image cap">
        <div class="card-block">
          <h4 class="card-title text-center">Card title 3</h4>
          <p class="card-text text-justify">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>
      </div>
    </div>
    <div class="col-md-3 col-sm-6 col-xs-12 col-centered center-block">
      <div class="card" style="width: 200px;">
        <div class="card-block">
          <h4 class="card-title text-center">Card title 4</h4>
          <p class="card-text text-justify">Conversions buzzword trending brand voice B2C curated ideation. Branding user-friendly hashtag tablet click-through rate disrupt iterative. CRM alignment The Cloud visibility taste makers. CRM snackable content engagement millennials. Content marketing integrated big data. Tablet shoptimization intuitive top influencers reaching out.</p>
        </div>
      </div>
    </div>

  </div>
Michael Coker
  • 52,626
  • 5
  • 64
  • 64
0

You have used fixed hieght 200px, I just run the code in fiddle. If you remove height:200px; and use .text-center class with card-block section then everything will be centered. But the main issue is you have used bootstrap-3.0.0, use the latest version of Bootstrap the issue will be fixed instantly....

Chamon Roy
  • 731
  • 5
  • 8
-1

i think it's a duplicate of this link

Since v3.0.1 Bootstrap has a built-in class named center-block that uses margin: 0 auto but is missing float:none. You can add that to your CSS to make it work with the grid system.

check the above link may be helpfull for you.

Parham Heidari
  • 316
  • 3
  • 14
  • HI Parham, I mentioned the same link on my second to last paragraph. – Iggy Jun 20 '17 at 18:18
  • This should be a comment, or flag the post as a duplicate. Posting a SO dupe link is not a solution to the question. If that question solves it, the question needs to be closed. – Michael Coker Jun 20 '17 at 18:25