Bootstrap Grid – Small Devices

<code>
Equal Width
<pre>
<div class=”container”>
<div class=”row”>
<div class=”col”>
1 of 2
</div>
<div class=”col”>
1 of 2
</div>
</div>
<div class=”row”>
<div class=”col”>
1 of 3
</div>
<div class=”col”>
1 of 3
</div>
<div class=”col”>
1 of 3
</div>
</div>
</div>
</pre>

Setting One Column Width
<pre>
<div class=”container”>
<div class=”row”>
<div class=”col”>
1 of 3
</div>
<div class=”col-6″>
2 of 3 (wider)
</div>
<div class=”col”>
3 of 3
</div>
</div>
<div class=”row”>
<div class=”col”>
1 of 3
</div>
<div class=”col-5″>
2 of 3 (wider)
</div>
<div class=”col”>
3 of 3
</div>
</div>
</div>
</pre>

Variable Width Content
<pre>

<div class=”container”>
<div class=”row justify-content-md-center”>
<div class=”col col-lg-2″>
1 of 3
</div>
<div class=”col-12 col-md-auto”>
Variable width content
</div>
<div class=”col col-lg-2″>
3 of 3
</div>
</div>
<div class=”row”>
<div class=”col”>
1 of 3
</div>
<div class=”col-12 col-md-auto”>
Variable width content
</div>
<div class=”col col-lg-2″>
3 of 3
</div>
</div>
</div>
</pre>

Equal Width Multi Row

Responsive Classes
<pre>

Stacked to Horizontal
<pre>

Mix and Match
<pre>

<!– Stack the columns on mobile by making one full-width and the other half-width –>
<div class=”row”>
<div class=”col col-md-8″>.col .col-md-8</div>
<div class=”col-6 col-md-4″>.col-6 .col-md-4</div>
</div>

<!– Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop –>
<div class=”row”>
<div class=”col-6 col-md-4″>.col-6 .col-md-4</div>
<div class=”col-6 col-md-4″>.col-6 .col-md-4</div>
<div class=”col-6 col-md-4″>.col-6 .col-md-4</div>
</div>

<!– Columns are always 50% wide, on mobile and desktop –>
<div class=”row”>
<div class=”col-6″>.col-6</div>
<div class=”col-6″>.col-6</div>
</div>
</pre>

Vertical Alignment
<pre>

<div class=”container”>
<div class=”row align-items-start”>
<div class=”col”>
One of three columns
</div>
<div class=”col”>
One of three columns
</div>
<div class=”col”>
One of three columns
</div>
</div>
<div class=”row align-items-center”>
<div class=”col”>
One of three columns
</div>
<div class=”col”>
One of three columns
</div>
<div class=”col”>
One of three columns
</div>
</div>
<div class=”row align-items-end”>
<div class=”col”>
One of three columns
</div>
<div class=”col”>
One of three columns
</div>
<div class=”col”>
One of three columns
</div>
</div>
</div>
</pre>

Another
<pre>
<div class=”container”>
<div class=”row”>
<div class=”col align-self-start”>
One of three columns
</div>
<div class=”col align-self-center”>
One of three columns
</div>
<div class=”col align-self-end”>
One of three columns
</div>
</div>
</div>
</pre>

Horizontal Alignment

<pre>

<div class=”container”>
<div class=”row justify-content-start”>
<div class=”col-4″>
One of two columns
</div>
<div class=”col-4″>
One of two columns
</div>
</div>
<div class=”row justify-content-center”>
<div class=”col-4″>
One of two columns
</div>
<div class=”col-4″>
One of two columns
</div>
</div>
<div class=”row justify-content-end”>
<div class=”col-4″>
One of two columns
</div>
<div class=”col-4″>
One of two columns
</div>
</div>
<div class=”row justify-content-around”>
<div class=”col-4″>
One of two columns
</div>
<div class=”col-4″>
One of two columns
</div>
</div>
<div class=”row justify-content-between”>
<div class=”col-4″>
One of two columns
</div>
<div class=”col-4″>
One of two columns
</div>
</div>
</div>
</pre>

No Gutters
<pre>

.no-gutters {
margin-right: 0;
margin-left: 0;

> .col,
> [class*=”col-“] {
padding-right: 0;
padding-left: 0;
}
}
</pre>

Column Wrapping
<pre>

<div class=”row”>
<div class=”col-9″>.col-9</div>
<div class=”col-4″>.col-4<br />Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class=”col-6″>.col-6<br />Subsequent columns continue along the new line.</div>
</div>
</pre>

Column Reset

<pre>

<!– Add the extra clearfix for only the required viewport –>
<div class=”clearfix hidden-sm-up”></div>

Reordering – Flex order
<pre>
Copy
<div class=”container”>
<div class=”row”>
<div class=”col flex-unordered”>
First, but unordered
</div>
<div class=”col flex-last”>
Second, but last
</div>
<div class=”col flex-first”>
Third, but first
</div>
</div>
</div>
</pre>

Offsetting Columns

<pre>

<div class=”row”>
<div class=”col-md-4″>.col-md-4</div>
<div class=”col-md-4 offset-md-4″>.col-md-4 .offset-md-4</div>
</div>
<div class=”row”>
<div class=”col-md-3 offset-md-3″>.col-md-3 .offset-md-3</div>
<div class=”col-md-3 offset-md-3″>.col-md-3 .offset-md-3</div>
</div>
<div class=”row”>
<div class=”col-md-6 offset-md-3″>.col-md-6 .offset-md-3</div>
</div>
</pre>

Push and Pull

<pre>

Nesting
<pre>

<div class=”row”>
<div class=”col-sm-9″>
Level 1: .col-sm-9
<div class=”row”>
<div class=”col-8 col-sm-6″>
Level 2: .col-8 .col-sm-6
</div>
<div class=”col-4 col-sm-6″>
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</pre>

SaSS Mixins
<pre>

$grid-columns: 12;
$grid-gutter-width-base: 30px;

$grid-gutter-widths: (
xs: $grid-gutter-width-base, // 30px
sm: $grid-gutter-width-base, // 30px
md: $grid-gutter-width-base, // 30px
lg: $grid-gutter-width-base, // 30px
xl: $grid-gutter-width-base // 30px
)

$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);

$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
</pre>

Mixins

<pre>

// Creates a wrapper for a series of columns
@mixin make-row($gutters: $grid-gutter-widths) {
display: flex;
flex-wrap: wrap;

@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
margin-right: ($gutter / -2);
margin-left: ($gutter / -2);
}
}
}

// Make the element grid-ready (applying everything but the width)
@mixin make-col-ready($gutters: $grid-gutter-widths) {
position: relative;
// Prevent columns from becoming too narrow when at smaller grid tiers by
// always setting `width: 100%;`. This works because we use `flex` values
// later on to override this initial width.
width: 100%;
min-height: 1px; // Prevent collapsing

@each $breakpoint in map-keys($gutters) {
@include media-breakpoint-up($breakpoint) {
$gutter: map-get($gutters, $breakpoint);
padding-right: ($gutter / 2);
padding-left: ($gutter / 2);
}
}
}

@mixin make-col($size, $columns: $grid-columns) {
flex: 0 0 percentage($size / $columns);
width: percentage($size / $columns);
// Add a `max-width` to ensure content within each column does not blow out
// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
// do not appear to require this.
max-width: percentage($size / $columns);
}

// Get fancy by offsetting, or changing the sort order
@mixin make-col-offset($size, $columns: $grid-columns) {
margin-left: percentage($size / $columns);
}

@mixin make-col-push($size, $columns: $grid-columns) {
left: if($size > 0, percentage($size / $columns), auto);
}

@mixin make-col-pull($size, $columns: $grid-columns) {
right: if($size > 0, percentage($size / $columns), auto);
}
</pre>
</code>
Reference: https://v4-alpha.getbootstrap.com/layout/grid/

Bootstrap Grid – Small Devices

Recent Posts

Recent Comments