MDL-61460 tool_componentlibrary: removed white space.
[moodle.git] / admin / tool / componentlibrary / content / moodle / themes / positioning.md
1 ---
2 layout: docs
3 title: "Positioning"
4 description: The use of Bootstraps flexbox utilities to position items on the screen.
5 date: 2020-02-04T09:40:32+01:00
6 draft: false
7 weight: 3
8 ---
9 ##
10 ## Position an single item at the right
12 Use the ```.justify-content-end``` class to position on item in a ```.d-flex``` container to the right
14 {{< example >}}
15 <div class="d-flex justify-content-end">
16   <button class="btn btn-success">OK</button>
17 </div>
18 {{< /example >}}
21 ## Position on item in a group of items to the right
23 Use the ```.ml-auto``` to move the last item in ad ```.d-flex``` container to the right.
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 >}}
34 ### Center items
36 Use the ```align-items-center``` class to align items horizontally in a container.
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 >}}
46 ### Middle of the container
48 Combine the ```align-items-center``` with the ```justify-content-center``` class to position an element in the middle of a container.
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 >}}