Skip to content
Related Articles

Related Articles

Foundation CSS Media Object Section Alignment

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 17 Mar, 2022
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. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. The framework is based on bootstrap, which is similar to SaaS. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Media Object in Foundation CSS adds the media (usually an image) with some content (usually text) by using media object classes. We can use these classes to add both media and some textual content. We can use the media-object class to create the division and the media-object-section to create the sections.

Foundation CSS Media Object Basics Classes:

  • media-object: This class is used to create the division for the media and content.
  • media-object-section: This class is used to create the sections.

Section Alignment in Media Object: By default, the section aligns to the top of the container. With the help of section alignment middle and bottom classes, we can align the section both in the middle and bottom positions.

Syntax :

<div class="media-object">
   <div class="media-object-section middle/bottom">
       .....
   </div>
   <div class="media-object-section middle/bottom">
       .....
   </div>
</div>

Note: Download necessary files from https://get.foundation/sites/docs/installation.html  or https://codepen.io/ZURBFoundation/pen/aWKpOj use for trying out examples. Compressed CSS might not work properly (i.e. called through CDN).

Example 1: This example illustrates the Section Alignment middle Media Object in Foundation CSS.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Foundation CSS Media Object Section Alignment</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet"
          href=
</head>
  
<body style="margin: 2rem; width: 50%;">
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h4>Foundation CSS Media Object 
            Section Alignment - middle</h4>
    </center>
  
    <div class="media-object">
        <div class="media-object-section middle">
            <div class="thumbnail">
                <img src=
            </div>
        </div>
        <div class="media-object-section main-section">
            <h5><strong>GeeksforGeeks</strong></h5>
            <p>
              A Computer Science portal for geeks.
              It contains well written, well thought
              and well explained computer science and
              programming articles. A Computer Science 
              portal for geeks. It contains well written,
              well thought and well explained computer 
              science and programming articles.
            </p>
            <p>
              A Computer Science portal for geeks.
              It contains well written, well thought
              and well explained computer science and
              programming articles. A Computer Science 
              portal for geeks. It contains well written,
              well thought and well explained computer 
              science and programming articles.
            </p>
  
            <p>
              A Computer Science portal for geeks.
              It contains well written, well thought
              and well explained computer science and
              programming articles. A Computer Science 
              portal for geeks. It contains well written,
              well thought and well explained computer 
              science and programming articles.
            </p>
  
        </div>
    </div>
</body>
  
</html>


Output:

Foundation CSS Media Object Section Alignment

Foundation CSS Media Object Section Alignment

Example 2: This example illustrates the Section Alignment bottom Media Object in Foundation CSS.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Foundation CSS Media Object Section Alignment</title>
    <!-- Compressed CSS -->
    <link rel="stylesheet" 
          href=
</head>
  
<body style="margin: 2rem; width: 50%;">
    <center>
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
        <h4>Foundation CSS Media Object 
            Section Alignment - bottom</h4>
    </center>
    <div class="media-object">
        <div class="media-object-section bottom">
            <div class="thumbnail">
                <img src=
            </div>
        </div>
        <div class="media-object-section main-section">
            <h5><strong>GeeksforGeeks</strong></h5>
            <p>
              A Computer Science portal for geeks.
              It contains well written, well thought
              and well explained computer science and
              programming articles. A Computer Science 
              portal for geeks. It contains well written,
              well thought and well explained computer 
              science and programming articles.
            </p>
            <p>
              A Computer Science portal for geeks.
              It contains well written, well thought
              and well explained computer science and
              programming articles. A Computer Science 
              portal for geeks. It contains well written,
              well thought and well explained computer 
              science and programming articles.
            </p>     
            <p>
              A Computer Science portal for geeks.
              It contains well written, well thought
              and well explained computer science and
              programming articles. A Computer Science 
              portal for geeks. It contains well written,
              well thought and well explained computer 
              science and programming articles.
            </p>
  
        </div>
    </div>
</body>
  
</html>


Output:

Foundation CSS Media Object Section Alignment

Foundation CSS Media Object Section Alignment

Reference: https://get.foundation/sites/docs/media-object.html#section-alignment


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!