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/www/moodle/admin/tool/componentlibrary/content/moodle/themes

Free Space:

250.21 GB

🔧 Quick Actions

✏️ Editing: positioning.md

---
layout: docs
title: "Positioning"
description: The use of Bootstraps flexbox utilities to position items on the screen.
date: 2020-02-04T09:40:32+01:00
draft: false
weight: 3
---
##
## Position an single item at the right

Use the ```.justify-content-end``` class to position on item in a ```.d-flex``` container to the right

{{< example >}}
<div class="d-flex justify-content-end">
  <button class="btn btn-success">OK</button>
</div>
{{< /example >}}

## Position on item in a group of items to the right

Use the ```.ml-auto``` to move the last item in ad ```.d-flex``` container to the right.

{{< example >}}
<div class="d-flex">
  <button class="btn btn-secondary mr-1">Ha!</button>
  <button class="btn btn-secondary mr-1">Jay</button>
  <button class="btn btn-secondary mr-1">Wow</button>
  <button class="ml-auto btn btn-success">OK</button>
</div>
{{< /example >}}

### Center items

Use the ```align-items-center``` class to align items horizontally in a container.

{{< example >}}
<div class="d-flex align-items-center p-2 bg-light">
    <div class="bg-success mr-2" style="width: 35px; height: 35px;"></div>
    <div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
    <div class="bg-info mr-2" style="width: 20px; height: 20px;"></div>
</div>
{{< /example >}}

### Middle of the container

Combine the ```align-items-center``` with the ```justify-content-center``` class to position an element in the middle of a container.

{{< example >}}
<div class="d-flex align-items-center justify-content-center p-3 bg-light" style="height:100px;">
    <div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
</div>
{{< /example >}}

❌ Cancel

🗂️ Enhanced PHP File Manager

📊 Server Information

🔧 Quick Actions

✏️ Editing: positioning.md

📤 Upload File

📁 Create Folder

📄 Create File

✏️ Rename Item

🗑️ Delete Confirmation