Skip to content
Related Articles

Related Articles

Foundation CSS Containers Complete Reference

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Jul, 2022
View Discussion
Improve Article
Save Article

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:

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
      <title>Foundation CSS Tabs Basics</title>
      <!-- Compressed CSS -->
      <link rel="stylesheet"
          href=
      <!-- Compressed JavaScript -->           
      <script src=
      </script>
      <script src=
      </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:

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!