Question

Ran into a problem when it comes to bootstrap columns being consistent in size, and the way they look on smaller devices: JSFiddle

<div class="well info">
  <div class="row row-centered">
    <div class="col-sm-2 col-sm-offset-1 col-centered">
      <div class="count row-centered">
        Column 1
      </div>
      <div class="row-centered">
        <a href="/checks">Text 1</a>
      </div>
    </div>
    <div class="col-sm-2 col-centered">
      <div class="count row-centered">
        Column 2
      </div>
      <div class="row-centered">
        <a href="">Text 1</a>
      </div>
    </div>
    <div class="col-sm-2 col-centered">
      <div class="count row-centered">Column 3</div>
      <div class="row-centered"><a href="/checks">Text 1</a></div>
    </div>
    <div class="col-sm-2 col-centered">
      <div class="count row-centered">Column 4</div>
      <div class="row-centered"><a href="/upgrade">Text 4</a></div>
    </div>
    <div class="col-sm-2 col-centered">
      <div class="count row-centered"><b>Column 5</b>
        <br>
      </div>
      <div class="count row-centered">Text 1</div>
      <div class="row-centered">Text 3</div>
      <div class="row-centered">Text 4</div>
      </div>
      </div>
    </div>
  </div>
</div>

CSS

.row-centered {
    text-align:center;
}

.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

Essentially, given a setup such as the one outlined, how does one go about making sure that:

The row containing the elements is vertically centered depending on the size of the parent container.
The columns making up the row are all centered vertically to each other, despite potentially being different sizes.
The items in each column are aligned horizontally (centered).
The structure of the columns and rows on collapse (with smaller devices) isn't scrambled, and would appear with the columns displayed underneath one another.

I have tried several arrangements of nested rows, columns, and divs, but seemingly cannot get the columns to be vertically aligned, despite applying the appropriate classes (in my mind).

Is it possible to do so using a combination of CSS + Bootstrap?

Any advice and help is appreciated!

Answer 1

CSS (added vertical-align: middle and media query):

.row-centered {
  text-align: center;
}
.col-centered {
  /* reset the text-align */
  text-align: left;
}
@media (min-width: 768px) {
  .col-centered {
    display: inline-block;
    float: none;
    /* inline-block space fix */
    margin-right: -4px;
    vertical-align: middle;
  }
}

JSFIDDLE

Answer 2

Use this class on the column parent to make it centered with the other columns
```
.align-vertically {
  display: flex;
  align-items: center;
}
```
Use the same class on the column itself to make its content vertically centered
Use text-center on the column to align the text, and center-block on the children containers to make them aligned horizontally
Read up on the bootstrap grid system. In your case use col-xs-12 for full width of each container on smaller devices.

CODEPEN

Bootstrap align rows of different sizes

2 个答案:

JSFIDDLE