Flexible.gs Examples

This page showcases practical examples of how to use the Flexible Grid System to build common web layouts. Resize your browser window to see the responsive behavior of each example.

Note: The "Rendered Example" sections use simplified styling for clarity and simulate Flexible.gs classes. In a real project, you'd use the actual Flexible.gs stylesheet.

Example 1: Responsive Header

A common header layout with a logo on the left and navigation on the right. On smaller screens they stack.

Rendered Example:

HomeAboutServicesContact

HTML Structure:


<div class="container">
  <div class="row">
    <div class="col-sm-4 col-md-3">
      <!-- Your Logo -->
    </div>
    <div class="col-sm-8 col-md-9">
      <!-- Your Navigation -->
    </div>
  </div>
</div>

Example 2: Two-Column Layout (Main Content & Sidebar)

A typical blog layout. Sidebar stacks below on small screens.

Rendered Example:

Main Content (col-md-8)
Sidebar (col-md-4)

HTML Structure:


<div class="container">
  <div class="row">
    <div class="col-md-8">
      <!-- Main Content -->
    </div>
    <div class="col-md-4">
      <!-- Sidebar -->
    </div>
  </div>
</div>

Example 3: Three-Column Layout

Three equal-width columns on medium+ screens, stacking on small.

Rendered Example:

Column 1 (col-md-4)
Column 2 (col-md-4)
Column 3 (col-md-4)

HTML Structure:


<div class="container">
  <div class="row">
    <div class="col-md-4">Column A</div>
    <div class="col-md-4">Column B</div>
    <div class="col-md-4">Column C</div>
  </div>
</div>

Example 4: Nested Columns

Nesting a row inside a column for sub-layouts.

Rendered Example:

Main Area (col-lg-8)

Nested 1 (col-6)
Nested 2 (col-6)
Sidebar (col-lg-4)

HTML Structure:


<div class="container">
  <div class="row">
    <div class="col-lg-8">
      Main Area
      <div class="row">
        <div class="col-6">Nested A</div>
        <div class="col-6">Nested B</div>
      </div>
    </div>
    <div class="col-lg-4">Sidebar</div>
  </div>
</div>

Example 5: Basic Footer Layout

A full-width footer with centered content.

Rendered Example:

© 2025 Your Website. All rights reserved.

HTML Structure:


<footer>
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        © 2025 My Site
      </div>
    </div>
  </div>
</footer>

These examples provide a starting point. Flexible.gs allows for a wide variety of combinations to achieve the precise layout you need. Consult the “Learn” page for full details on classes and breakpoints.