Foundation CSS Media Complete Reference

Last Updated : 11 Jul, 2022

Foundation CSS Media contains lots of features to make pretty pages and focus on little things like a tooltip, badge coloring, badge icons, label icons, etc. to make a more attractive page.

Complete list Foundation CSS Media are listed below:

Foundation CSS Badge
- Foundation CSS Badge Coloring
- Foundation CSS Badge Icons
- Foundation CSS Badge Sass Reference
Foundation CSS Responsive Embed
- Foundation CSS Responsive Embed Aspect Ratios
- Foundation CSS Responsive Embed Sass Reference
Foundation CSS Label
- Foundation CSS Label Coloring
- Foundation CSS Label Icons
- Foundation CSS Label Sass Reference
Foundation CSS Orbit
- Foundation CSS Orbit Slide Contents
- Foundation CSS Orbit Using Animation
- Foundation CSS Orbit Sass Reference
- Foundation CSS Orbit JavaScript Reference
Foundation CSS Progress Bar
- Foundation CSS Progress Bar Color
- Foundation CSS Progress Bar with Text
- Foundation CSS Progress Bar Native
- Foundation CSS Progress Bar Native Meter
- Foundation CSS Progress Bar Screen Reader
- Foundation CSS Progress Bar Sass Reference
Foundation CSS Thumbnail
- Foundation CSS Thumbnail Sass Reference
Foundation CSS Tooltip
- Foundation CSS Tooltip Top
- Foundation CSS Tooltip clicking
- Foundation CSS Tooltip Right and Left
- Foundation CSS Tooltip Explicit Positioning
- Foundation CSS Tooltip Sass Reference
- Foundation CSS Tooltip JavaScript Reference

Below example will give you a brief idea about the Media of Foundation CSS:

Example:

HTML

<!DOCTYPE html>
<html>

<head>
    
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" />
</head>

<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            Foundation CSS Responsive Embed Default
        </h3>
        <div class="responsive-embed ">
            <iframe width="420"
                    height="315"
                    src=
"https://www.youtube.com/embed/bptRLm3OiV8">
            </iframe>
        </div>
    </center>
</body>
</html>