3

I have 2 columns in a bootstrap page like this:

<div class="col-xs-12 col-sm-6 col-md-8">
</div>
<div class="col-xs-6 col-md-4">
   <div class="container-fluid">
      <div class="row">
      </div>
   <div>
</div>

What I want to center is the right column (the second one). When I reduce the screen size to simulate smartphone devices I see the column aligned to the left side. What I want is to center all the content in that column either in small devices or big devices.

Sender
  • 6,660
  • 12
  • 47
  • 66
Levimatt
  • 453
  • 1
  • 11
  • 28

3 Answers3

1

Use offset classes provided by Bootstrap:

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-8 col-md-offset-0">
      <div class="wrapper">
        <h2>Left column</h2>
      </div>
    </div>
    <div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-0">
      <div class="wrapper">
        <h2>Right column</h2>
      </div>
    </div>
  </div>
</div>

Explanation:

First of all in your second column when you use col-xs-6 and do not specify col-sm-* it means that this is also col-sm-6:

<div class="col-xs-6"></div>
<div class="col-xs-6 col-sm-6"></div>

This two lines of code are the same (it is better to use first one). The same goes for offset classes (if you specify col-xs-offset-3 and do not specify col-sm-offset-* it means that this is also col-sm-offset-3).

In bootstrap you have 12 columns. If you want to center col-sm-6 you have to offset this by 3 columns (col-sm-offset-3 3+6+3).

I had to specify offsets to 0 in md columns because I had to overwrite col-sm-offset-3. If I would not done that, it would have been col-md-offset-3.

CODEPEN EXAMPLE

max
  • 8,632
  • 3
  • 21
  • 55
  • Yes, but in this case what offset class should I use to do this? – Levimatt Oct 31 '15 at 13:49
  • With your code the second column is displayed under the first column in big screen size. I want the two columns display in the same row. Now when the screen size is reduced I see the content centered but not in full size mode – Levimatt Oct 31 '15 at 14:00
  • Updated, I think this is what you want, check the example. – max Oct 31 '15 at 14:11
  • Yeah. That's what I'm talking about. Just what I need. Clean and simple. Maybe I have to learn how to use correctly the offset classes. Why do you use exactly those offsets? – Levimatt Oct 31 '15 at 14:33
1

I would utilise Bootstrap class "center-block" in this case.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8"></div>
    <div class="col-xs-12 col-md-4">
      <div class="row">
        <div class="center-block"></div>
      </div>
    </div>
  </div>
</div>

Example: http://www.bootply.com/fWjX4eLAuR

P.S don't use "container" class inside the rows and columns.

pasevin
  • 1,436
  • 1
  • 12
  • 14
0

I'm not sure to understand what you want, because it is pretty simple.

<div class="col-xs-12 col-sm-6 col-md-8">
</div>
<div class="col-xs-6 col-md-4">
   <div class="container-fluid">
      <div class="row">
        <p class="text-center">My text is centered even in a small device</p>
      </div>
   <div>
</div>

and if you want to add a virtual margin :

<div class="col-xs-12 col-sm-6 col-md-8">
</div>
<div class="col-xs-6 col-xs-offset-3 col-md-4 col-md-offset-3">
   <div class="container-fluid">
      <div class="row">
        <p class="text-center">My text is centered even in a small device</p>
      </div>
   <div>
</div>
Alexandre Tranchant
  • 4,426
  • 4
  • 43
  • 70