Language selection

Reflowing content around grids

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to reflow and wrap non-grid content around and below a grid cell ( box of content).

Design and coding

Basic use

Options

Use to reflow content around a grid. Grids create boxes of content, which is typically the desired result.

Appearance

No reflow (default grid behaviour):

Float (pull) left

Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids.

Float (pull) right

Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids. Reflowing content around grids.

Correct use

Compliance point(s):

  • Use .mrgn-*-md to create a margin of 15px , and to mimic the same gutter on a grid
  • Ensure you always apply both .mrgn-lft-md and .mrgn-rght-md to non-grid content when grids and non-grids are in the same row
    • This ensures content reflows around the grid cell
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
Code
// Float (pull) left:
 <div class="row">
  <div class="col-md-4 pull-left">
     <div class="well mrgn-bttm-md">
      <p>..</p>
     </div>
  </div>
  <div class="mrgn-lft-md mrgn-rght-md">
   <p>Reflowing content...</p>
  </div>
</div>

// Float (pull) right:
<div class="row">
  <div class="col-md-4 pull-right">
     <div class="well mrgn-bttm-md">
      <p>...</p>
     </div>
  </div>
  <div class="mrgn-lft-md mrgn-rght-md">
   <p>Reflowing content...</p>
  </div>
</div>

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: