The percentage width and height of an element can be set using the w-* and h-* classes, whereby * should be one of the following numbers: 25, 50, 75, or 100. It should be noted that Bootstrap does not offer responsive equivalents for these classes.
The classes are defined as follows:
.w-25 {
width: 25% !important;
}
.w-50 {
width: 50% !important;
}
.w-75 {
width: 75% !important;
}
.w-100 {
width: 100% !important;
}
.h-25 {
height: 25% !important;
}
.h-50 {
height: 50% !important;
}
.h-75 {
height: 75% !important;
}
.h-100 {
height: 100% !important;
}
The maximum width and height can be set to 100% using mw-100 and mh-100 respectively (note that no helper classes exist to set the maximum width and height values to any other number):
.mw-100 {
max-width: 100% !important;
}
.mh-100 {
max-height: 100% !important;
}
Source: Jakobus Benjamin, Marah Jason (2018), Mastering Bootstrap 4: Master the latest version of Bootstrap 4 to build highly customized responsive web apps, Packt Publishing; 2nd Revised edition.