How to center a col-xs-12 in bootstrap? - css

Question

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:
When the screen is large (or medium), I have no problem. It appears centered.
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).
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.

Answer 1

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

Answer 2

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>

Answer 3

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....

Answer 4

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.