MDL-61460 tool_componentlibrary: removed white space.
[moodle.git] / admin / tool / componentlibrary / content / moodle / themes / positioning.md
CommitLineData
3de68ad4
BB
1---
2layout: docs
3title: "Positioning"
4description: The use of Bootstraps flexbox utilities to position items on the screen.
5date: 2020-02-04T09:40:32+01:00
6draft: false
7weight: 3
8---
f03a7146 9##
3de68ad4
BB
10## Position an single item at the right
11
12Use the ```.justify-content-end``` class to position on item in a ```.d-flex``` container to the right
13
14{{< example >}}
15<div class="d-flex justify-content-end">
16 <button class="btn btn-success">OK</button>
17</div>
18{{< /example >}}
19
20
21## Position on item in a group of items to the right
22
23Use the ```.ml-auto``` to move the last item in ad ```.d-flex``` container to the right.
24
25{{< example >}}
26<div class="d-flex">
27 <button class="btn btn-secondary mr-1">Ha!</button>
28 <button class="btn btn-secondary mr-1">Jay</button>
29 <button class="btn btn-secondary mr-1">Wow</button>
30 <button class="ml-auto btn btn-success">OK</button>
31</div>
32{{< /example >}}
33
34### Center items
35
36Use the ```align-items-center``` class to align items horizontally in a container.
37
38{{< example >}}
39<div class="d-flex align-items-center p-2 bg-light">
40 <div class="bg-success mr-2" style="width: 35px; height: 35px;"></div>
41 <div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
42 <div class="bg-info mr-2" style="width: 20px; height: 20px;"></div>
43</div>
44{{< /example >}}
45
46### Middle of the container
47
48Combine the ```align-items-center``` with the ```justify-content-center``` class to position an element in the middle of a container.
49
50{{< example >}}
51<div class="d-flex align-items-center justify-content-center p-3 bg-light" style="height:100px;">
52 <div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
53</div>
54{{< /example >}}
55