Proyectos de Subversion Moodle

Rev

Rev 1 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 1 Rev 1441
Línea 18... Línea 18...
18 
{{< /example >}}
 18 
{{< /example >}}
Línea 19... Línea 19...
19 
 
 19 
 
Línea 20... Línea 20...
20 
 
 20 
 
Línea 21... Línea 21...
21 
## Position on item in a group of items to the right
 21 
## Position on item in a group of items to the right
22 
 
 22 
 
23 
Use the ```.ml-auto``` to move the last item in ad ```.d-flex``` container to the right.
 23 
Use the ```.ms-auto``` to move the last item in ad ```.d-flex``` container to the right.
24 
 
 24 
 
25 
{{< example >}}
 25 
{{< example >}}
26 
<div class="d-flex">
 26 
<div class="d-flex">
27 
  <button class="btn btn-secondary mr-1">Ha!</button>
 27 
  <button class="btn btn-secondary me-1">Ha!</button>
28 
  <button class="btn btn-secondary mr-1">Jay</button>
 28 
  <button class="btn btn-secondary me-1">Jay</button>
Línea 29... Línea 29...
29 
  <button class="btn btn-secondary mr-1">Wow</button>
 29 
  <button class="btn btn-secondary me-1">Wow</button>
Línea 30... Línea 30...
30 
  <button class="ml-auto btn btn-success">OK</button>
 30 
  <button class="ms-auto btn btn-success">OK</button>
Línea 31... Línea 31...
31 
</div>
 31 
</div>
32 
{{< /example >}}
 32 
{{< /example >}}
33 
 
 33 
 
34 
### Center items
 34 
### Center items
35 
 
 35 
 
36 
Use the ```align-items-center``` class to align items horizontally in a container.
 36 
Use the ```align-items-center``` class to align items horizontally in a container.
37 
 
 37 
 
Línea 38... Línea 38...
38 
{{< example >}}
 38 
{{< example >}}
Línea 39... Línea 39...
39 
<div class="d-flex align-items-center p-2 bg-light">
 39 
<div class="d-flex align-items-center p-2 bg-light">
Línea 40... Línea 40...
40 
    <div class="bg-success mr-2" style="width: 35px; height: 35px;"></div>
 40 
    <div class="bg-success me-2" style="width: 35px; height: 35px;"></div>
41 
    <div class="bg-warning mr-2" style="width: 48px; height: 48px;"></div>
 41 
    <div class="bg-warning me-2" style="width: 48px; height: 48px;"></div>
42 
    <div class="bg-info mr-2" style="width: 20px; height: 20px;"></div>
 42 
    <div class="bg-info me-2" style="width: 20px; height: 20px;"></div>
43 
</div>
 43 
</div>
44 
{{< /example >}}
 44 
{{< /example >}}