Foundation CSS Containers Complete Reference

Last Updated : 24 Jul, 2025

Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Foundation CSS Container contains features like creating a simple modal, nested model, title bars as a drop-down menu, off-canvas transition, and many more features that make a pretty container.

Complete list of Foundation CSS Container are listed below:

Foundation CSS Accordion
- Foundation CSS Accordion Basics
- Foundation CSS Accordion Advanced Options
- Foundation CSS Accordion and URLs
- Foundation CSS Accordion Sass Reference
- Foundation CSS Accordion JavaScript Reference
Foundation CSS Callout
- Foundation CSS Callout Basics
- Foundation CSS Callout Coloring
- Foundation CSS Callout Sizing
- Foundation CSS Callout Sass Reference
Foundation CSS Card
- Foundation CSS Card Basics
- Foundation CSS Card Sizing
- Foundation CSS Card Sass Reference
Foundation CSS Dropdown
- Foundation CSS Dropdown Basics
- Foundation CSS Dropdown Positioning
- Foundation CSS Dropdown Explicit Positioning
- Foundation CSS Dropdown Sass Reference
- Foundation CSS Dropdown JavaScript Reference
Foundation CSS Media Object
- Foundation CSS Media Object Basics
- Foundation CSS Media Object Section Alignment
- Foundation CSS Media Object Sass Reference
Foundation CSS Off-canvas
- Foundation CSS Off-canvas Installation
- Foundation CSS Off-canvas Position
- Foundation CSS Off-canvas Directions
- Foundation CSS Off-canvas Multiple Panels
- Foundation CSS Off-canvas Transitions
- Foundation CSS Off-canvas Reveal on Larger Screens
- Foundation CSS Off-canvas Combining with Title Bar
- Foundation CSS Nested Off-Canvas
- Foundation CSS Off-canvas Scrollbox
- Foundation CSS Off-canvas Sticky
- Foundation CSS Off-canvas Sizes
- Foundation CSS Off-canvas Sass Reference
- Foundation CSS Off-canvas JavaScript Reference
Foundation CSS Reveal
- Foundation CSS Reveal Basics
- Foundation CSS Reveal Sizing
- Foundation CSS Reveal Nested Modal
- Foundation CSS Reveal Full-screen
- Foundation CSS Reveal Advanced Options
- Foundation CSS Reveal Accessibility
- Foundation CSS Reveal Sass Reference
- Foundation CSS Reveal JavaScript Reference
Foundation CSS Tables
- Foundation CSS Tables Basics
- Foundation CSS Tables Hover State
- Foundation CSS Tables Stripes
- Foundation CSS Stacked Table
- Foundation CSS Scrolling Table
- Foundation CSS Tables Sass Reference
Foundation CSS Tabs
- Foundation CSS Tabs Basics
- Foundation CSS Vertical Tabs
- Foundation CSS Collapsing Tabs
- Foundation CSS Tabs and URLs
- Foundation CSS Tabs Sass Reference
- Foundation CSS Tabs JavaScript Reference
Foundation CSS Responsive Accordion Tabs
- Foundation CSS Responsive Accordion Tabs Basics
- Foundation CSS Responsive Accordion Tabs Plugin Options
- Foundation CSS Responsive Accordion Tabs Sass Reference
- Foundation CSS Responsive Accordion Tabs JavaScript Reference

Example:

HTML

<!DOCTYPE html>
<html>
  <head>
      <title>Foundation CSS Tabs Basics</title>
      <!-- Compressed CSS -->
      <link rel="stylesheet"
          href=
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css">
      <!-- Compressed JavaScript -->            
      <script src=
  "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
      </script>
      <script src=
  "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/foundation.min.js">
      </script>
  </head>
  <body>    
    <center>
        <h2 style="color: green;">GeeksforGeeks</h2>
        <h3> Foundation CSS Tabs Basics </h3>
    </center>

    <ul class="tabs"
        data-tabs id="tabs-basic">
        <li class="tabs-title is-active">
        <a href="#tabBasic1"
            aria-selected="true">
            GFG Tab 1
        </a>
        </li>
        <li class="tabs-title">
        <a href="#tabBasic2"> GFG Tab 2 </a>
        </li>
    </ul>
    <div class="tabs-content"
        data-tabs-content="tabs-basic">
        <div class="tabs-panel is-active"
            id="tabBasic1">
          <div>
              <p style="color:green">
                 A Computer Science portal for geeks.
                 It contains well written, well thought
                 and well explained computer science and
                programming articles
              </p>

          </div>
        </div>

        <div class="tabs-panel"
            id="tabBasic2">
            
            <center>
              <h2 style="color: green;">
                GeeksforGeeks
              </h2>
              <button class="button secondary" 
                      type="button" 
                      data-toggle="dropdownBasic"> 
                Click Dropdown
              </button>
              <div class="dropdown-pane" 
                   id="dropdownBasic" 
                   data-dropdown 
                   data-auto-focus="true">
                <strong>
                  GeeksforGeeks:
                </strong>
                
<p>
                  A Computer Science portal for geeks. 
                  It contains well written, well thought
                  and well explained computer science and
                  programming articles.
                </p>


              </div>
        </div>
    </div>
    <script>
        $(document).foundation();
    </script>
  </body>
    
</html>

Output:

Foundation CSS Menu

kartik

Improve

Article Tags :

Foundation CSS Containers Complete Reference

Similar Reads

Foundation Setup

Foundation Containers

Foundation Navigation

Foundation Typography

Foundation Controls

Foundation Media

Thank You!

What kind of Experience do you want to share?