9.1 Layout - Columns Newspaper-style columns

Use .cols-2 or .cols-3 for columns that you want to flow in newspaper style

Actually High Life quis fashion axe. Twee id nostrud deep v literally, flannel laborum irony Blue Bottle squid culpa. Sriracha cardigan Banksy elit, fugiat Pinterest church-key letterpress direct trade Blue Bottle post-ironic. Pickled occaecat pop-up, flexitarian Blue Bottle hella umami sint dreamcatcher. Put a bird on it leggings sriracha nostrud, mlkshk art party aute pour-over. Duis keffiyeh accusamus, proident ethical quis id kale chips small batch Austin. Freegan delectus craft beer beard.

Leggings YOLO deserunt roof party, whatever flannel American Apparel. Small batch gastropub Carles magna. Cliche Helvetica nulla anim nostrud, skateboard velit farm-to-table chia heirloom tempor gentrify. Banjo biodiesel readymade gastropub exercitation. Cray Helvetica leggings, roof party taxidermy mumblecore seitan swag distillery cardigan Truffaut elit meditation pariatur. Leggings meh XOXO health goth Williamsburg, squid aliquip irony culpa nesciunt esse fixie Godard velit. Cliche consectetur trust fund Portland salvia forage semiotics dolor, pariatur deserunt put a bird on it try-hard chia iPhone.

9.2 Layout - Displays Displays

  • .inline-block - display inline-block
  • .block - display block
  • .inline - display inline

Hiding elements

For a display: none use Bootstrap 4's responsive utilities. For the most up-to-date documentation, see: http://v4-alpha.getbootstrap.com/layout/responsive-utilities/

  • The .hidden-*-up classes hide the element when the viewport is at the given breakpoint or wider. For example, .hidden-md-up hides an element on medium, large, and extra-large viewports.
  • The .hidden-*-down classes hide the element when the viewport is at the given breakpoint or smaller. For example, .hidden-md-down hides an element on extra-small, small, and medium viewports).
  • There are no explicit “visible”/”show” responsive utility classes; you make an element visible by simply not hiding it at that breakpoint size.
  • You can combine one .hidden-*-up class with one .hidden-*-down class to show an element only on a given interval of screen sizes. For example, .hidden-sm-down.hidden-xl-up shows the element only on medium and large viewports. Using multiple .hidden-*-up classes or multiple .hidden-*-down classes is redundant and pointless.
  • These classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport breakpoint sizes; you will instead need to use custom CSS in such cases.

9.3 Layout - Float Float

Responsive floats are achieved with .pull-*-left and .pull-*-right.

To apply to all view ports use the xs breakpoint.

Example

Float left on all viewport sizes
Float right on all viewport sizes
Don't float on all viewport sizes

Float left on viewports sized SM (small) or wider
Float left on viewports sized MD (medium) or wider
Float left on viewports sized LG (large) or wider
Float left on viewports sized XL (extra-large) or wider

<p>
<div class="pull-xs-left">Float left on all viewport sizes</div>
<div class="pull-xs-right">Float right on all viewport sizes</div>
<div class="pull-xs-none">Don't float on all viewport sizes</div>
</p>
<p>
<div class="pull-sm-left">Float left on viewports sized SM (small) or wider</div>
<div class="pull-md-left">Float left on viewports sized MD (medium) or wider</div>
<div class="pull-lg-left">Float left on viewports sized LG (large) or wider</div>
<div class="pull-xl-left">Float left on viewports sized XL (extra-large) or wider</div>
</p>

9.4 Layout - Grid Grid system

We use bootstrap4's grid system. For the most comprehensive documentation, please see: http://v4-alpha.getbootstrap.com/layout/grid

Extra small
<544px 		Small
≥544px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 576px 720px 940px 1140px
Class prefix .col-xs- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12
Gutter width 1.875rem / 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Stacked-to-horizontal

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6

Flexible styling based on breakpoints

Build on the previous example by creating even more dynamic and powerful layouts with tablet .col-sm-* classes.

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Offset columns

Move columns to the right using .col-md-offset-* classes. These classes increase the left margin of a column by * columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.

.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3

9.5 Layout - Gutters Gutters

This isn't really an atom, but we thought would complement bootstrap's existing scaffolding.

Use .gutter-small on the .rows where you want the containing elements to be closer to each other. This works particularly well for form inputs that you want to place inline instead of stacked.

Example 
<div class="row gutter-small">
    <div class="col-sm-3">
        <input placeholder="form input" class="form-control">
    </div>
    <div class="col-sm-3">
        <input placeholder="form input" class="form-control">
    </div>
    <div class="col-sm-3">
        <input placeholder="form input" class="form-control">
    </div>
    <div class="col-sm-3">
        <input placeholder="form input" class="form-control">
    </div>
<div>

9.6 Layout - Layers Layers

These are z-index layers for convenience. They increment every 100 and go from -1000 to 1000. use .layer-1 for z-index: 100 and .layer-neg-9 for z-index: -900 for example.

  • classes
  • .layer-1 - z-index: 100
  • .layer-2 - z-index: 200
  • .layer-3 - z-index: 300
  • .layer-4 - z-index: 400
  • .layer-5 - z-index: 500
  • .layer-6 - z-index: 600
  • .layer-7 - z-index: 700
  • .layer-8 - z-index: 800
  • .layer-9 - z-index: 900
  • .layer-10 - z-index: 1000
  • .layer-neg-1 - z-index: -100
  • .layer-neg-2 - z-index: -200
  • .layer-neg-3 - z-index: -300
  • .layer-neg-4 - z-index: -400
  • .layer-neg-5 - z-index: -500
  • .layer-neg-6 - z-index: -600
  • .layer-neg-7 - z-index: -700
  • .layer-neg-8 - z-index: -800
  • .layer-neg-9 - z-index: -900
  • .layer-neg-10 - z-index: -1000

9.7 Layout - Positioning Positioning

  • classes
  • .pos-a - position absolute
  • .pos-r - position relative
  • .pos-s - position static
  • .pos-f - position fixed

9.7.1 Layout - Positioning - Reset Setting position properties to auto from each side

To reset a position property (left, right, top or bottom) value to auto use one of these classes.

Examples
Default styling
Relative positioning of .[modifier class]
left-auto
set left to auto
Relative positioning of .left-auto
right-auto
set right to auto
Relative positioning of .right-auto
top-auto
set top to auto
Relative positioning of .top-auto
bottom-auto
set bottom to auto
Relative positioning of .bottom-auto 
<div class="pos-a [modifier class]">
    Relative positioning of <code>.[modifier class]</code>
</div>

9.7.2 Layout - Positioning - Side Positioning from each side

Used in conjunction with the Positioning classes. Use directions in conjunction with size like .left-* .right-* .top-* .bottom-* where * is the size either s, m, l, or 0

Examples
Default styling
Relative positioning of .[modifier class]
left-s
small space from the left
Relative positioning of .left-s
right-m
medium space from the right
Relative positioning of .right-m
top-l
large space from the top
Relative positioning of .top-l
bottom-0
0 space from the bottom
Relative positioning of .bottom-0
left-middle
50% space from left
Relative positioning of .left-middle
top-middle
50% space from top
Relative positioning of .top-middle 
<div class="pos-r [modifier class]">
    Relative positioning of <code>.[modifier class]</code>
</div>

9.8 Layout - Transformation Transformation

Use these atoms for simple X and Y translations

Examples
Default styling
.[modifier class]
shift-left
shift to the left 100%
.shift-left
shift-right
shift to the right 100%
.shift-right
shift-up
shift up 100%
.shift-up
shift-down
shift down 100%
.shift-down
shift-none
don't shift
.shift-none
shift-middle-x
shift to the left 50%
.shift-middle-x
shift-middle-y
shift up 50%
.shift-middle-y 
<div class="row m-y-l">
    <div class="[modifier class] col-sm-4 bg-moonstone">
        .[modifier class]
    </div>
</div>