Bootstrap CSS designing div boxes - centering issues

Question

I'm trying to design text boxes: JS Fiddle. I want them to be centered, but I can't get them to appear in the center of the page when they are next to one another. I would really appreciate your help!

    .bottomboxes {
        border-radius: 30px 30px 30px 30px;
        -moz-border-radius: 30px 30px 30px 30px;
        -webkit-border-radius: 30px 30px 30px 30px;
        border: 1px solid #000000;
        border: 1px solid #000000;
        background: #aaaaaa;
        text-align: center;
        max-width: 200px;
        margin: auto;
    }
    
    .rightbox {
      margin-left: 20px;
    }

 <div class="row">
      <div class="col-sm-2 bottomboxes">
        <h3>text</h3>
        <p>more text</p>
      </div>
      <div class="col-sm-2 bottomboxes rightbox">
        <h3>text</h3>
      </div>
    </div>

Answer 1

You can use CSS Flexbox but then you don't need to use bootstrap 3 classes with bottomboxes with col-sm-1.

Checkout the updated Fiddle (jsFiddle).

Something like:

/* Parent (replaced with .row) */
.content-holder {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

/* Childs (removed .col-sm-1) */
.bottomboxes {
  flex: 1; /* both should be of equal size */
}

/* Styling Resets */
html, body { width: 100%; height: 100%; }

---

To make it mobile responsive:

You need the textboxes to be on top and bottom. For that use mobile media query. Checkout this Codepen.

It should look like:

/* On Mobiles (i.e. screen-width < 768px) */
@media screen and (max-width: 767px) {
  .content-holder {
     flex-direction: column;
   }
}

Hope this helps!