Bottom

Set the bottom placement of positioned elements.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome
Edge
Firefox
Safari

b-0
bottom: 0;
b-1
bottom: .25rem;
b-2
bottom: .5rem;
b-3
bottom: .75rem;
b-4
bottom: 1rem;
b-5
bottom: 1.25rem;
b-6
bottom: 1.5rem;
b-7
bottom: 1.75rem;
b-8
bottom: 2rem;
b-9
bottom: 2.25rem;
b-10
bottom: 2.5rem;
b-11
bottom: 2.75rem;
b-12
bottom: 3rem;
b-13
bottom: 3.25rem;
b-14
bottom: 3.5rem;
b-15
bottom: 3.75rem;
b-16
bottom: 4rem;
b-17
bottom: 4.25rem;
b-18
bottom: 4.5rem;
b-19
bottom: 4.75rem;
b-20
bottom: 5rem;
b-21
bottom: 5.25rem;
b-22
bottom: 5.5rem;
b-23
bottom: 5.75rem;
b-24
bottom: 6rem;
b-25
bottom: 6.25rem;
b-26
bottom: 6.5rem;
b-27
bottom: 6.75rem;
b-28
bottom: 7rem;
b-29
bottom: 7.25rem;
b-30
bottom: 7.5rem;
b-31
bottom: 7.75rem;
b-32
bottom: 8rem;
b-33
bottom: 8.25rem;
b-34
bottom: 8.5rem;
b-35
bottom: 8.75rem;
b-36
bottom: 9rem;
b-37
bottom: 9.25rem;
b-38
bottom: 9.5rem;
b-39
bottom: 9.75rem;
b-40
bottom: 10rem;
b-41
bottom: 10.25rem;
b-42
bottom: 10.5rem;
b-43
bottom: 10.75rem;
b-44
bottom: 11rem;
b-45
bottom: 11.25rem;
b-46
bottom: 11.5rem;
b-47
bottom: 11.75rem;
b-48
bottom: 12rem;
b-49
bottom: 12.25rem;
b-50
bottom: 12.5rem;
b-51
bottom: 12.75rem;
b-52
bottom: 13rem;
b-53
bottom: 13.25rem;
b-54
bottom: 13.5rem;
b-55
bottom: 13.75rem;
b-56
bottom: 14rem;
b-57
bottom: 14.25rem;
b-58
bottom: 14.5rem;
b-59
bottom: 14.75rem;
b-60
bottom: 15rem;
b-61
bottom: 15.25rem;
b-62
bottom: 15.5rem;
b-63
bottom: 15.75rem;
b-64
bottom: 16rem;
b-65
bottom: 16.25rem;
b-66
bottom: 16.5rem;
b-67
bottom: 16.75rem;
b-68
bottom: 17rem;
b-69
bottom: 17.25rem;
b-70
bottom: 17.5rem;
b-71
bottom: 17.75rem;
b-72
bottom: 18rem;
b-73
bottom: 18.25rem;
b-74
bottom: 18.5rem;
b-75
bottom: 18.75rem;
b-76
bottom: 19rem;
b-77
bottom: 19.25rem;
b-78
bottom: 19.5rem;
b-79
bottom: 19.75rem;
b-80
bottom: 20rem;
b-81
bottom: 20.25rem;
b-82
bottom: 20.5rem;
b-83
bottom: 20.75rem;
b-84
bottom: 21rem;
b-85
bottom: 21.25rem;
b-86
bottom: 21.5rem;
b-87
bottom: 21.75rem;
b-88
bottom: 22rem;
b-89
bottom: 22.25rem;
b-90
bottom: 22.5rem;
b-91
bottom: 22.75rem;
b-92
bottom: 23rem;
b-93
bottom: 23.25rem;
b-94
bottom: 23.5rem;
b-95
bottom: 23.75rem;
b-96
bottom: 24rem;
b-97
bottom: 24.25rem;
b-98
bottom: 24.5rem;
b-99
bottom: 24.75rem;
b-100
bottom: 25rem;
b-101
bottom: 25.25rem;
b-102
bottom: 25.5rem;
b-103
bottom: 25.75rem;
b-104
bottom: 26rem;
b-105
bottom: 26.25rem;
b-106
bottom: 26.5rem;
b-107
bottom: 26.75rem;
b-108
bottom: 27rem;
b-109
bottom: 27.25rem;
b-110
bottom: 27.5rem;
b-111
bottom: 27.75rem;
b-112
bottom: 28rem;
b-113
bottom: 28.25rem;
b-114
bottom: 28.5rem;
b-115
bottom: 28.75rem;
b-116
bottom: 29rem;
b-117
bottom: 29.25rem;
b-118
bottom: 29.5rem;
b-119
bottom: 29.75rem;
b-120
bottom: 30rem;
b-121
bottom: 30.25rem;
b-122
bottom: 30.5rem;
b-123
bottom: 30.75rem;
b-124
bottom: 31rem;
b-125
bottom: 31.25rem;
b-126
bottom: 31.5rem;
b-127
bottom: 31.75rem;
b-128
bottom: 32rem;
b-129
bottom: 32.25rem;
b-130
bottom: 32.5rem;
b-131
bottom: 32.75rem;
b-132
bottom: 33rem;
b-133
bottom: 33.25rem;
b-134
bottom: 33.5rem;
b-135
bottom: 33.75rem;
b-136
bottom: 34rem;
b-137
bottom: 34.25rem;
b-138
bottom: 34.5rem;
b-139
bottom: 34.75rem;
b-140
bottom: 35rem;
b-141
bottom: 35.25rem;
b-142
bottom: 35.5rem;
b-143
bottom: 35.75rem;
b-144
bottom: 36rem;
b-145
bottom: 36.25rem;
b-146
bottom: 36.5rem;
b-147
bottom: 36.75rem;
b-148
bottom: 37rem;
b-149
bottom: 37.25rem;
b-150
bottom: 37.5rem;
b-151
bottom: 37.75rem;
b-152
bottom: 38rem;
b-153
bottom: 38.25rem;
b-154
bottom: 38.5rem;
b-155
bottom: 38.75rem;
b-156
bottom: 39rem;
b-157
bottom: 39.25rem;
b-158
bottom: 39.5rem;
b-159
bottom: 39.75rem;
b-160
bottom: 40rem;
b-161
bottom: 40.25rem;
b-162
bottom: 40.5rem;
b-163
bottom: 40.75rem;
b-164
bottom: 41rem;
b-165
bottom: 41.25rem;
b-166
bottom: 41.5rem;
b-167
bottom: 41.75rem;
b-168
bottom: 42rem;
b-169
bottom: 42.25rem;
b-170
bottom: 42.5rem;
b-171
bottom: 42.75rem;
b-172
bottom: 43rem;
b-173
bottom: 43.25rem;
b-174
bottom: 43.5rem;
b-175
bottom: 43.75rem;
b-176
bottom: 44rem;
b-177
bottom: 44.25rem;
b-178
bottom: 44.5rem;
b-179
bottom: 44.75rem;
b-180
bottom: 45rem;
b-181
bottom: 45.25rem;
b-182
bottom: 45.5rem;
b-183
bottom: 45.75rem;
b-184
bottom: 46rem;
b-185
bottom: 46.25rem;
b-186
bottom: 46.5rem;
b-187
bottom: 46.75rem;
b-188
bottom: 47rem;
b-189
bottom: 47.25rem;
b-190
bottom: 47.5rem;
b-191
bottom: 47.75rem;
b-192
bottom: 48rem;
b-193
bottom: 48.25rem;
b-194
bottom: 48.5rem;
b-195
bottom: 48.75rem;
b-196
bottom: 49rem;
b-197
bottom: 49.25rem;
b-198
bottom: 49.5rem;
b-199
bottom: 49.75rem;
b-200
bottom: 50rem;
b-201
bottom: 50.25rem;
b-202
bottom: 50.5rem;
b-203
bottom: 50.75rem;
b-204
bottom: 51rem;
b-205
bottom: 51.25rem;
b-206
bottom: 51.5rem;
b-207
bottom: 51.75rem;
b-208
bottom: 52rem;
b-209
bottom: 52.25rem;
b-210
bottom: 52.5rem;
b-211
bottom: 52.75rem;
b-212
bottom: 53rem;
b-213
bottom: 53.25rem;
b-214
bottom: 53.5rem;
b-215
bottom: 53.75rem;
b-216
bottom: 54rem;
b-217
bottom: 54.25rem;
b-218
bottom: 54.5rem;
b-219
bottom: 54.75rem;
b-220
bottom: 55rem;
b-221
bottom: 55.25rem;
b-222
bottom: 55.5rem;
b-223
bottom: 55.75rem;
b-224
bottom: 56rem;
b-225
bottom: 56.25rem;
b-226
bottom: 56.5rem;
b-227
bottom: 56.75rem;
b-228
bottom: 57rem;
b-229
bottom: 57.25rem;
b-230
bottom: 57.5rem;
b-231
bottom: 57.75rem;
b-232
bottom: 58rem;
b-233
bottom: 58.25rem;
b-234
bottom: 58.5rem;
b-235
bottom: 58.75rem;
b-236
bottom: 59rem;
b-237
bottom: 59.25rem;
b-238
bottom: 59.5rem;
b-239
bottom: 59.75rem;
b-240
bottom: 60rem;
b-241
bottom: 60.25rem;
b-242
bottom: 60.5rem;
b-243
bottom: 60.75rem;
b-244
bottom: 61rem;
b-245
bottom: 61.25rem;
b-246
bottom: 61.5rem;
b-247
bottom: 61.75rem;
b-248
bottom: 62rem;
b-249
bottom: 62.25rem;
b-250
bottom: 62.5rem;
b-251
bottom: 62.75rem;
b-252
bottom: 63rem;
b-253
bottom: 63.25rem;
b-254
bottom: 63.5rem;
b-255
bottom: 63.75rem;
b-256
bottom: 64rem;
b-257
bottom: 64.25rem;
b-258
bottom: 64.5rem;
b-259
bottom: 64.75rem;
b-260
bottom: 65rem;
b-261
bottom: 65.25rem;
b-262
bottom: 65.5rem;
b-263
bottom: 65.75rem;
b-264
bottom: 66rem;
b-265
bottom: 66.25rem;
b-266
bottom: 66.5rem;
b-267
bottom: 66.75rem;
b-268
bottom: 67rem;
b-269
bottom: 67.25rem;
b-270
bottom: 67.5rem;
b-271
bottom: 67.75rem;
b-272
bottom: 68rem;
b-273
bottom: 68.25rem;
b-274
bottom: 68.5rem;
b-275
bottom: 68.75rem;
b-276
bottom: 69rem;
b-277
bottom: 69.25rem;
b-278
bottom: 69.5rem;
b-279
bottom: 69.75rem;
b-280
bottom: 70rem;
b-281
bottom: 70.25rem;
b-282
bottom: 70.5rem;
b-283
bottom: 70.75rem;
b-284
bottom: 71rem;
b-285
bottom: 71.25rem;
b-286
bottom: 71.5rem;
b-287
bottom: 71.75rem;
b-288
bottom: 72rem;
b-289
bottom: 72.25rem;
b-290
bottom: 72.5rem;
b-291
bottom: 72.75rem;
b-292
bottom: 73rem;
b-293
bottom: 73.25rem;
b-294
bottom: 73.5rem;
b-295
bottom: 73.75rem;
b-296
bottom: 74rem;
b-297
bottom: 74.25rem;
b-298
bottom: 74.5rem;
b-299
bottom: 74.75rem;
b-300
bottom: 75rem;
b-301
bottom: 75.25rem;
b-302
bottom: 75.5rem;
b-303
bottom: 75.75rem;
b-304
bottom: 76rem;
b-305
bottom: 76.25rem;
b-306
bottom: 76.5rem;
b-307
bottom: 76.75rem;
b-308
bottom: 77rem;
b-309
bottom: 77.25rem;
b-310
bottom: 77.5rem;
b-311
bottom: 77.75rem;
b-312
bottom: 78rem;
b-313
bottom: 78.25rem;
b-314
bottom: 78.5rem;
b-315
bottom: 78.75rem;
b-316
bottom: 79rem;
b-317
bottom: 79.25rem;
b-318
bottom: 79.5rem;
b-319
bottom: 79.75rem;
b-320
bottom: 80rem;
b-321
bottom: 80.25rem;
b-322
bottom: 80.5rem;
b-323
bottom: 80.75rem;
b-324
bottom: 81rem;
b-325
bottom: 81.25rem;
b-326
bottom: 81.5rem;
b-327
bottom: 81.75rem;
b-328
bottom: 82rem;
b-329
bottom: 82.25rem;
b-330
bottom: 82.5rem;
b-331
bottom: 82.75rem;
b-332
bottom: 83rem;
b-333
bottom: 83.25rem;
b-334
bottom: 83.5rem;
b-335
bottom: 83.75rem;
b-336
bottom: 84rem;
b-337
bottom: 84.25rem;
b-338
bottom: 84.5rem;
b-339
bottom: 84.75rem;
b-340
bottom: 85rem;
b-341
bottom: 85.25rem;
b-342
bottom: 85.5rem;
b-343
bottom: 85.75rem;
b-344
bottom: 86rem;
b-345
bottom: 86.25rem;
b-346
bottom: 86.5rem;
b-347
bottom: 86.75rem;
b-348
bottom: 87rem;
b-349
bottom: 87.25rem;
b-350
bottom: 87.5rem;
b-351
bottom: 87.75rem;
b-352
bottom: 88rem;
b-353
bottom: 88.25rem;
b-354
bottom: 88.5rem;
b-355
bottom: 88.75rem;
b-356
bottom: 89rem;
b-357
bottom: 89.25rem;
b-358
bottom: 89.5rem;
b-359
bottom: 89.75rem;
b-360
bottom: 90rem;
b-361
bottom: 90.25rem;
b-362
bottom: 90.5rem;
b-363
bottom: 90.75rem;
b-364
bottom: 91rem;
b-365
bottom: 91.25rem;
b-366
bottom: 91.5rem;
b-367
bottom: 91.75rem;
b-368
bottom: 92rem;
b-369
bottom: 92.25rem;
b-370
bottom: 92.5rem;
b-371
bottom: 92.75rem;
b-372
bottom: 93rem;
b-373
bottom: 93.25rem;
b-374
bottom: 93.5rem;
b-375
bottom: 93.75rem;
b-376
bottom: 94rem;
b-377
bottom: 94.25rem;
b-378
bottom: 94.5rem;
b-379
bottom: 94.75rem;
b-380
bottom: 95rem;
b-381
bottom: 95.25rem;
b-382
bottom: 95.5rem;
b-383
bottom: 95.75rem;
b-384
bottom: 96rem;
b-auto
bottom: auto;
b-100%
bottom: 100%;
b-50%
bottom: 50%;

Responsiveness

Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.

Target viewport sizes with breakpoint prefixes.

@sm:b-(value)
Small≥640px
@md:b-(value)
Medium≥768px
@lg:b-(value)
Large≥1024px
@xxl:b-(value)
Extra Large≥1536px

Hover State

Apply styles conditionally on hover using the h: prefix.

Add the h: prefix to apply styles only when the user hovers over the element.

Syntax:h:b-(value)

Negative Values

Use negative variants to position in the opposite direction.

Use the -- syntax to apply negative numeric values.

Syntax:b--(value)