Center a Row Using Bootstrap 3

center a row using Bootstrap 3

What you are doing is not working, because you apply the margin: auto to the full-width column.

Wrap it in a div and center that one. E.g:

<div class="i-am-centered">
  <div class="row">...</div>
</div>

.i-am-centered { margin: auto; max-width: 300px;}

http://www.bootply.com/93751

Its a cleaner solution anyway, as it is more expressive and as you usually don't want to mess with the grid.

Center a column using Twitter Bootstrap 3

There are two approaches to centering a column <div> in Bootstrap 3:

Approach 1 (offsets):

The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2.

In markup this would look like:

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

Now, there's an obvious drawback for this method. It only works for even column sizes, so only .col-X-2, .col-X-4, col-X-6, col-X-8, and col-X-10 are supported.

Approach 2 (the old `margin:auto`)

You can center any column size by using the proven margin: 0 auto; technique. You just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:

.col-centered{
    float: none;
    margin: 0 auto;
}

Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout:

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

Note: With both techniques you could skip the .row element and have the column centered inside a .container, but you would notice a minimal difference in the actual column size because of the padding in the container class.

Update:

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.

Bootstrap 3 - columns won't center align

As others have pointed out, change col-md-3 to col-md-4

I do not want the columns to span the entire row. I think that will make the images look too big for the space.

the solution I know of for Bootstrap 3 is to add a max-width to a container so it doesn't stretch the full screen/element (without removing the 100% from the images as that would no longer make them resize/responsive).

You may also want to use col-sm-4 or col-sm-6 so they don't end up too big when the screen is smaller:

https://codepen.io/StudioKonKon/pen/yQQrdM

.mycontent{   max-width: 800px; /* or something else */}

<!-- Bootstrap CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container mycontent"> <div class="row justify-content-md-center">
  <div class="col-md-4 text-center">   <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />  </div>
  <div class="col-md-4 text-center">   <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />  </div>
  <div class="col-md-4 text-center">   <img alt="TBD" width="100%" src="https://via.placeholder.com/150" />  </div>
 </div><!-- end row --></div><!-- end container -->

How to center horizontally and vertically content inside bootstrap 3 row with grids?

I have found a solution that works for my site using table html tag which automatically centers the content in a td. For bigger screens I needed to adjust the container height because of the the video embed-responsive class (video container is enlarged if the video is enlarged).

Bootstrap 3 row with columns:

<div class="row">
        <div class="col-sm-6" style="background-color:red; height: 100%;">
            <table style="width:100%">
                <tr>
                    <td class="td-responsive-options td-yellow-bg" valign="middle" align="center">
                        <h2>What do you need?</h2>
                        <h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur</h4>
                    </td>
                </tr>
            </table>
        </div>
        <div class="col-sm-6" style="background-color:blue; height: 100%;">
            <table style="width:100%">
                <tr>
                    <td class="td-responsive-options td-gray-bg" valign="middle" align="center">
                        <div class="embed-responsive embed-responsive-16by9">
                            <iframe src="https://www.youtube.com/embed/tgbNymZ7vqY">
                            </iframe>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

Responsive height:

/* Large screens ----------- */
    @media only screen and (min-width : 1824px) {
        .container {
            height: 600px;
        }

        .td-responsive-options {
            height:600px;
        }
    }

You can find a working solution here

How to center content in a Bootstrap column?

Use:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

instead of

<div class="col-xs-1 center-block">

You can also use bootstrap 3 css:

<!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4 now has flex classes that will center the content:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

Note that by default it will be x-axis unless flex-direction is column

Center align thumbnails in a row - Bootstrap 3

give your first column div a extra class col-md-offset-2 Like Below

<div class="col-sm-3 col-md-offset-2 col-md-2">

If you cannot use offset then you should add class center-divs to all col- divs and add below code to yur custom css.

.center-divs{
    float: none;
    display: inline-block;
    margin-right: auto;
    margin-left: auto;
}

3 columns vertically center in a row Bootstrap 3

well if your columns are each 2 bootstrap-columns wide you could use the following:

<div class="col-lg-2 col-lg-offset-3">
  Menu 1
</div>
<div class="col-lg-2">
  Menu 2
</div>
<div class="col-lg-2">
  Menu 3
</div>

Centering text in row with bootstrap grid

See you have already used .text-center on you .project-name which align text to center, so what I could suggest is that try pseudo selector ::before as below,

.text-center::before{
  content:"";
  margin-left:calc(100% - 75%);
}

how can I center these 3 columns using bootstrap

The issue with your layout is that in order to center your 3 columns, you would have to offset the left column by 1.5 (half of the leftover columns):

// 12 Column Layout, 3 columns of col-md-3, offset of 1.5 needed (which isn't a class) 
12 - (3 + 3 + 3) = 3 / 2 = 1.5

Since that won't work (as col-md-offset-1.5 isn't a class) I think you have 2 options here:

Option 1: Change your col-md-3 to col-md-4 and put it in a container:

<div class="container">
  <div class="col-md-4 box">
    <div>                            
      <h4>box 1</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-4 box">
    <div>                            
      <h4>box 2</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-4 box">
    <div>                            
      <h4>box 3</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
</div>

Bootply Example 1

Option 2: Change your col-md-3 to col-md-2 and col-md-offset-1 to col-md-offset-3 and put it in container-fluid:

<div class="container-fluid">
  <div class="col-md-2 col-md-offset-3 box">
    <div>                            
      <h4>box 1</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-2 box">
    <div>                            
      <h4>box 2</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
  <div class="col-md-2 box">
    <div>                            
      <h4>box 3</h4>
      <p>some text dfgdfgdfgdfg</p>                        
    </div>
  </div>
</div>

Bootply Example 2

Both methods change the layout so that the full 12 columns are taken up (or offset correctly), but one gives you a bit more space to work with.

For more info on the Bootstrap Grid see the Documentation

Center a Row Using Bootstrap 3