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-*-mdto create a margin of 15px , and to mimic the same gutter on a grid - Ensure you always apply both
.mrgn-lft-mdand.mrgn-rght-mdto 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: