Bootstrap: Centering col-md-5?

Question

I feel like this is a very weird question but I couldn't seem to find a solution online.

If I have a col-md-5, I can't seem to center it. As far as I understood the grid system, if I choose a column size (1-12), in order to control the position of the column I use col-##-offset-#.

So if I have a col-md-4, I would use col-md-offset-4 to push it 4 columns from the left, and then it will be centered. The idea is that, to center a column, there must be the same amount of columns within the grid from the left of it and from the right of it.

Now, what if I have a, let's say, col-md-5? How can I center it? Doing something like col-md-4 will leave 3 from the right. I tried several things but no success.

Thanks in advance.

Carol Skelly · Answer 1 · 2023-03-16T13:55:35.933

23

Bootstrap 5

In Bootstrap 5 (and Bootstrap 4) this can be done simply with mx-auto for auto left/right margins...

<div class="container">
  <div class="row">
     <div class="col-sm-5 mx-auto">
        Centered
    </div>
  </div>
</div>

edited Mar 16 '23 at 13:55

answered May 01 '18 at 19:29

Carol Skelly

351,302
90
710
624

1

This works in Bootstrap 5 as well. – Collin Krawll Mar 16 '23 at 05:33

score 8 · Answer 2 · answered Jul 04 '17 at 17:49

8

<div class="col-md-10 col-md-offset-1">
    <div class="col-md-6 col-md-offset-3">
    </div>
</div>

answered Jul 04 '17 at 17:49

Ryan Friedman

293
3
7

1

Smartest answer! if you want to do something like `col-*-3` centered, you can't because you don't have `col-*-offset-4.5` but you could use `col-*-4` and `col-*-offset-4`. Yes, it could be so big for your proposes but the hack is to add an inner div specifying other size and offset to center it. e.g `col-*-8` and `col-*-offset-2`. The result is something shorter than parent div specified but bigger than just applyed `col-*-2` and `col-*-offset-5` to the parent. It should be the acepted answer. – gsubiran Jul 22 '17 at 13:01

Hashem Qolami · Answer 3 · 2015-10-27T23:20:27.963

2

Twitter bootstrap applies float property on columns col-*-#. First, we need to override that by re-setting float to none for a specific column.

Then we can give the column a margin-left/right of auto to align it to center horizontally — Example Here.

@media (min-width: 992px) {
  .col-md-center {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-md-5 col-md-center">
    <!--                 ^-- Added class name
     --> ...
    </div>
  </div>
</div>

edited Oct 27 '15 at 23:20

answered Oct 27 '15 at 23:04

Hashem Qolami

97,268
26
150
164

There is an easier way to do this that utilizes the existing bootstrap classes. Please see my answer. – Ryan Friedman Jul 24 '17 at 05:41
@Ryan Friedman Your method isn't the best, because you are creating a parent div to get what you wanted, instead this method, which I really think is the best one in my opinion – DarkteK Nov 23 '17 at 21:39
It's better to use built in Bootstrap classes that account for responsiveness then create a new CSS class with a media query, and add. It is the best solution offered on this page and there's nothing inherently wrong with a parent div. – Ryan Friedman Mar 13 '18 at 19:30

turbopipp · Answer 4 · 2015-10-27T23:28:37.980

Best bet is to make your own rule for this, create a 4.5 offset.

left margin = (100/12) * (12-5) / 2 = 29.175%

.col-xs-5 {
  background-color: red;
}
.col-xs-offset-4_5 {
  margin-left: 29.175%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-5 col-xs-offset-4_5">.col-xs-5</div>
    </div>
  </div>
</div>

Or you could go this way, utilize a 6 column, but remove 1 column by adding halv a column padding on each side.

.col-xs-6.morepadding {
  padding: 0px 4.16%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-6 col-xs-offset-3 morepadding">.col-xs-6 with half the width of a column as padding on each side</div>
    </div>
  </div>
</div>

There is an easier way to do this that utilizes the existing bootstrap classes. Please see my answer. — Ryan Friedman, Jul 24 '17 at 05:41

score 0 · Answer 5 · edited May 23 '17 at 12:13

0

Have a look at this post and the top answer: Center a column using Twitter Bootstrap 3

Specifically "Approach #2", I think is what you are looking for

Fiddle: http://jsfiddle.net/85oy836u/1/

<div class="container">
<div class="row text-center">
    <div class="col-xs-5" style="float: none; margin: 0 auto; background: green;">col-xs-5</div>
</div>
    </div>

edited May 23 '17 at 12:13

Community

1
1

answered Oct 27 '15 at 23:42

EdwardM

1,116
11
20

Looks like Hashem beat me to the answer :) – EdwardM Oct 27 '15 at 23:43

Mike Ross · Answer 6 · 2015-10-27T22:57:50.007

-2

Well you can try this

.col-centered {
display:inline-block;
float:none;
}

And here is the html for that

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

Thats just general idea of it but here is an example i found online.

edited Oct 27 '15 at 22:57

answered Oct 27 '15 at 22:49

Mike Ross

2,942
5
49
101

score -3 · Answer 7 · answered Oct 27 '15 at 23:19

-3

Try adding class text-center like this:

 <div class="row">
<div class="col-md-12 text-center">
BLABLA
</div>
</div>

This solution works with col-md-5 too

answered Oct 27 '15 at 23:19

Luiz Paulo Camargo

184
1
9

I Just suggested a solution. If not worked for you , sorry, but downvoted my answer is unnecessary. – Luiz Paulo Camargo Nov 02 '15 at 01:35
sorry for down voting but text-center will center the text nothing else – Adel Ben Hamadi Oct 05 '22 at 12:18

Bootstrap: Centering col-md-5?

7 Answers7

Linked