Current File : /home/vacivi36/ava/admin/tool/componentlibrary/content/moodle/themes/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 >}}
Mini Shell