Boxes in center?

Question

I'm trying to center these price boxes. It's been programmed for 4 boxes, but I only want two of them. I tried to put these boxes in the center, but I can't find the solution. I hope somebody can help me?

This is my html code right now:

<div id="fh5co-pricing-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 text-center fh5co-heading animate-box">
                <h2>Pricing</h2>
                <p>Lorum ipsum</p>
            </div>
        </div>
        <div class="row">
            <div class="pricing">
                <div class="col-md-3 animate-box">
                    <div class="price-box">
                        <h2 class="pricing-plan">Caller</h2>
                        <div class="price"><sup class="currency">€</sup>2,50<small>/month</small></div>
                        <p>Lorum ipsum</p>
                        <a href="#" class="btn btn-select-plan btn-sm">Select Plan</a>
                    </div>
                </div>

                <div class="col-md-3 animate-box">
                    <div class="price-box">
                        <h2 class="pricing-plan">Watch</h2>
                        <div class="price"><sup class="currency">€</sup>11,50<small>/month</small></div>
                        <p>Lorum ipsum</p>
                        <a href="#" class="btn btn-select-plan btn-sm">Select Plan</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

And this is my CSS code right now:

#fh5co-pricing-section {
  padding: 7em 0;
  background: #fcfcfc;
}
@media screen and (max-width: 768px) {
  #fh5co-pricing-section {
    padding: 3em 0;
  }
}
#fh5co-pricing-section .pricing {
  display: block;
  float: left;
  margin-bottom: 30px;
}
#fh5co-pricing-section .price-box {
  text-align: center;
  padding: 30px;
  background: #fff;
  margin-bottom: 40px;
  position: relative;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.11);
  top: 2px;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

Answer 1

First of all you should get rid of the div with class="pricing" between divs with class row and col-md-3 otherwise you could end up with weird layout behaviour. (it is generally good to keep element hierarchy with bootstrap class as strict as possible) As a next step add col-md-offset-3 class to the first column element what will insert a 3 column placeholder before it shifting the items into the middle.

Note if you need dynamic layout with variable number of elements you should consider using flexbox (bootstrap 4 has built in flex support)

Edit: the fixed html template look like this:

<div id="fh5co-pricing-section">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3 text-center fh5co-heading animate-box">
                <h2>Pricing</h2>
                <p>Lorum ipsum</p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-3 col-md-offset-3 animate-box">
                <div class="price-box">
                    <h2 class="pricing-plan">Caller</h2>
                    <div class="price"><sup class="currency">€</sup>2,50<small>/month</small></div>
                    <p>Lorum ipsum</p>
                    <a href="#" class="btn btn-select-plan btn-sm">Select Plan</a>
                </div>
            </div>

            <div class="col-md-3 animate-box">
                <div class="price-box">
                    <h2 class="pricing-plan">Watch</h2>
                    <div class="price"><sup class="currency">€</sup>11,50<small>/month</small></div>
                    <p>Lorum ipsum</p>
                    <a href="#" class="btn btn-select-plan btn-sm">Select Plan</a>
                </div>
            </div>
        </div>
    </div>
</div>