What is Foundation CSS Containers Complete Reference?

In this article, we will learn Foundation CSS Containers Complete Reference,This free Foundation CSS tutorial for complete beginners will help you learn Foundation CSS from scratch.

Foundation CSS Containers Complete Reference️‍🔥

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/foundation-sites@6.7.4/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/foundation-sites@6.5.1/dist/js/foundation.min.js">
      </script>
  </head>
  <body>    
    <center>
        <h2 style="color: green;">w3wiki</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 Beginner.
                 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;">
                w3wiki
              </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>
                  w3wiki:
                </strong>
                 
<p>
                  A Computer Science portal for Beginner. 
                  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: