Bootstrap - center div's with col-ld-*

Question

I have a section with projects. This projects now are only 3, but I'm still adding new projects. The problem is that when size screen is between 768px and 1200px my div are 2 in row while the 3rd is in new line and it's okay, but is possibility to be this 3rd div in center of row?

Now last is on the left new line. It'll be better look to be in center. I mean, that when one div is on the new line and is alone I want to be it on the center row.

Here is my bootstrap code:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="no-padding" id="portfolio">
  <div class="container-fluid">
    <h2 class="section-heading text-center">Projects</h2>
    <hr class="primary">
    <div class="row no-gutter center-block">
      <div class="col-lg-4 col-sm-6">
        <a href="#" target="_blank" class="portfolio-box">
          <img src="img/portfolio/thumbnails/skull.jpg" class="img-responsive" alt="">
          <div class="portfolio-box-caption">
            <div class="portfolio-box-caption-content">
              <div class="project-category text-faded">
                Visits system
              </div>
              <div class="project-name">
                Hospital
              </div>
            </div>
          </div>
        </a>
        <div class="bg-dark gitHub">
          <div class="text-center gitLink">
            <a href="#" target="_blank">Source code</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6">
        <a href="#" target="_blank" class="portfolio-box">
          <img src="img/portfolio/thumbnails/pets1.jpg" class="img-responsive" alt="">
          <div class="portfolio-box-caption">
            <div class="portfolio-box-caption-content">
              <div class="project-category text-faded">
                Shopping
              </div>
              <div class="project-name">
                Shop
              </div>
            </div>
          </div>
        </a>
        <div class="bg-dark gitHub">
          <div class="text-center gitLink">
            <a href="#" target="_blank">Source code</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 center-block">
        <a href="#" target="_blank" class="portfolio-box">
          <img src="img/portfolio/thumbnails/forum.jpg" class="img-responsive" alt="">
          <div class="portfolio-box-caption">
            <div class="portfolio-box-caption-content">
              <div class="project-category text-faded">
                Under construction
              </div>
              <div class="project-name">
                Forum
              </div>
            </div>
          </div>
        </a>
        <div class="bg-dark gitHub">
          <div class="text-center gitLink">
            <a href="#" target="_blank">Source code</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

It looks like this now, I want to be last div on the center - is it possible by responsive screens?

When I add col-md-offset-3 over 1200 px It looks now like this:

Answer 1

Try this

<div class="col-lg-4 col-sm-6 col-sm-offset-3 col-lg-offset-0">
            <a href="#" target="_blank" class="portfolio-box">
                <img src="img/portfolio/thumbnails/forum.jpg" 
                class="img-responsive" alt="">
                <div class="portfolio-box-caption">
                    <div class="portfolio-box-caption-content">
                        <div class="project-category text-faded">
                            Under construction
                        </div>
                        <div class="project-name">
                            Forum
                        </div>
                    </div>
                </div>
            </a>
            <div class="bg-dark gitHub">
                <div class="text-center gitLink">
                    <a href="#" target="_blank">Source code</a>
                </div>
            </div>
</div>

Adding offset when the screen is small should make it work.

Answer 2

Added color for visualization, add col-sm-offset-3 to the 3rd div then remove that center-block. I also added the col-xs-* so that you can see it in the snippet

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<section class="no-padding" id="portfolio">
  <div class="container-fluid">
    <h2 class="section-heading text-center">Projects</h2>
    <hr class="primary">
    <div class="row no-gutter center-block">
      <div class="col-lg-4 col-sm-6 col-xs-6" style="background-color:red">
        <a href="#" target="_blank" class="portfolio-box">
          <img src="img/portfolio/thumbnails/skull.jpg" class="img-responsive" alt="">
          <div class="portfolio-box-caption">
            <div class="portfolio-box-caption-content">
              <div class="project-category text-faded">
                Visits system
              </div>
              <div class="project-name">
                Hospital
              </div>
            </div>
          </div>
        </a>
        <div class="bg-dark gitHub">
          <div class="text-center gitLink">
            <a href="#" target="_blank">Source code</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 col-xs-6" style="background-color:blue">
        <a href="#" target="_blank" class="portfolio-box">
          <img src="img/portfolio/thumbnails/pets1.jpg" class="img-responsive" alt="">
          <div class="portfolio-box-caption">
            <div class="portfolio-box-caption-content">
              <div class="project-category text-faded">
                Shopping
              </div>
              <div class="project-name">
                Shop
              </div>
            </div>
          </div>
        </a>
        <div class="bg-dark gitHub">
          <div class="text-center gitLink">
            <a href="#" target="_blank">Source code</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-sm-6 col-sm-offset-3 col-xs-6 col-xs-offset-3" style="background-color:pink">
        <a href="#" target="_blank" class="portfolio-box">
          <img src="img/portfolio/thumbnails/forum.jpg" class="img-responsive" alt="">
          <div class="portfolio-box-caption">
            <div class="portfolio-box-caption-content">
              <div class="project-category text-faded">
                Under construction
              </div>
              <div class="project-name">
                Forum
              </div>
            </div>
          </div>
        </a>
        <div class="bg-dark gitHub">
          <div class="text-center gitLink">
            <a href="#" target="_blank">Source code</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Answer 3

Just add "col-sm-offset-3" to your last column and remove you class "center-block". This will give the expected output