x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<p>Bootstrap does not provide by default responsive variants for some of their classes, such as position-md-absolute end-md-0.</p><p>Adding responsive position utility classes allows for dynamic and adaptable positioning of elements based on viewport width. This ensures that the layout remains visually appealing across a variety of devices and screen sizes. </p><p>Resize the window to see the effect of different utility classes.</p><div class="mb-3 d-block d-sm-none"> <button type="button" class="btn btn-primary position-absolute bottom-50"> .position-absolute .bottom-0 </button></div><div class="mb-3 d-none d-sm-block d-md-none"> <button type="button" class="btn btn-primary position-sm-absolute top-sm-0"> .position-sm-absolute .top-sm-0 </button></div><div class="mb-3 d-none d-md-block d-lg-none position-relative h-100"> <button type="button" class="btn btn-primary position-md-absolute end-md-0"> .position-md-absolute .end-md-0 </button></div><div class="mb-3 d-none d-lg-block d-xl-none"> <button type="button" class="btn btn-primary position-lg-sticky top-lg-100"> .position-lg-sticky .top-lg-100 </button></div><div class="mb-3 d-none d-xl-block d-xxl-none"> <button type="button" class="btn btn-primary position-xl-fixed top-xl-0"> .position-xl-fixed .top-xl-0 </button></div><div class="mb-3 d-none d-xxl-block"> <button type="button" class="btn btn-primary position-xxl-static top-xxl-50"> .position-xxl-static .top-xxl-50 </button></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<p>Bootstrap does not provide by default responsive variants for some of their classes, such as position-md-absolute end-md-0.</p><p>Adding responsive position utility classes allows for dynamic and adaptable positioning of elements based on viewport width. This ensures that the layout remains visually appealing across a variety of devices and screen sizes. </p><p>Resize the window to see the effect of different utility classes.</p><div class="mb-3 d-block d-sm-none"> <button type="button" class="btn btn-primary position-absolute bottom-50"> .position-absolute .bottom-0 </button></div><div class="mb-3 d-none d-sm-block d-md-none"> <button type="button" class="btn btn-primary position-sm-absolute top-sm-0"> .position-sm-absolute .top-sm-0 </button></div><div class="mb-3 d-none d-md-block d-lg-none position-relative h-100"> <button type="button" class="btn btn-primary position-md-absolute end-md-0"> .position-md-absolute .end-md-0 </button></div><div class="mb-3 d-none d-lg-block d-xl-none"> <button type="button" class="btn btn-primary position-lg-sticky top-lg-100"> .position-lg-sticky .top-lg-100 </button></div><div class="mb-3 d-none d-xl-block d-xxl-none"> <button type="button" class="btn btn-primary position-xl-fixed top-xl-0"> .position-xl-fixed .top-xl-0 </button></div><div class="mb-3 d-none d-xxl-block"> <button type="button" class="btn btn-primary position-xxl-static top-xxl-50"> .position-xxl-static .top-xxl-50 </button></div>No notes provided.
No params configured.
_position_utilities.scss
1
2
3
4
5
@each $key, $value in $utilities { $utilities: map-merge($utilities, ( $key: map-merge($value, (responsive: true)) ));}
No assets to display.