Centered column

We can center a column by using the small-centered class.

Here is a demo on centered column.

As same as the grid, there is medium-centered and large-centered class. We don’t need the medium and large because they will inherit the small-centered class if we hasn’t specify.

If we want to un-center a column in specific screen size, we can use the medium-uncentered and large-uncentered.


1<div class='header-bg'>
2  <div class='row'>
3    <div class='small-6 small-centered columns'>Big Title Here</div>
4  </div>


 1.header-bg {
 2  background: url( center center;
 3  background-size: cover;
 4  background-attachment: fixed;
 5  padding: 3em;
 8.columns {
 9  background: rgba(255, 255, 255, .5);
10  border: 1px solid blue;
11  padding-top: 1em;
12  padding-bottom: 1em;
13  margin-bottom: 1em;

What’s next? We’re going to take a look at “Push and pull column”.

overlaied image when clicked on thumbnail

Makzan | Mobile web design | Table of Content