MakClass

Newest ⟷ Oldest

Snapshot at 2017-04-12
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.

Open example in jsFiddle

HTML
```
<div class='header-bg'>
  <div class='row'>
    <div class='small-6 small-centered columns'>Big Title Here</div>
  </div>
</div>
```
CSS
```
.header-bg {
  background: url(http://placekitten.com/1000/500) center center;
  background-size: cover;
  background-attachment: fixed;
  padding: 3em;
}

.columns {
  background: rgba(255, 255, 255, .5);
  border: 1px solid blue;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
```
Snapshot at 2017-04-11
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.

Open example in jsFiddle

HTML
```
<div class='header-bg'>
  <div class='row'>
    <div class='small-6 small-centered columns'>Big Title Here</div>
  </div>
</div>
```
CSS
```
.header-bg {
  background: url(http://placekitten.com/1000/500) center center;
  background-size: cover;
  background-attachment: fixed;
  padding: 3em;
}

.columns {
  background: rgba(255, 255, 255, .5);
  border: 1px solid blue;
  padding-top: 1em;
  padding-bottom: 1em;
  margin-bottom: 1em;
}
```

Centered column

Centered column