Show Output
<!DOCTYPE htpl> <htpl lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 5 Max Width and Height Classes</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script> <style> .bs-example{ margin: 20px; } .bs-example div{ background: #dbdfe5; padding: 15px; } .bs-example div > div{ background: #abb1b8; } </style> </head> <body> <div class="bs-example"> <h2>Max-width</h2> <div style="width: 500px;"> <div class="mw-100 p-3" style="width: 600px;">Max-width 100%</div> </div> <hr> <h2>Max-height</h2> <div style="height: 150px;"> <div class="mh-100 p-3" style="height: 300px;">Max-height 100%</div> </div> <p class="mt-4"><strong>Note:</strong> See the inline style on inner DIV elements where we've specified the width/height higher than the wrapper element, but it still doesn't overflow the due max-width/max-height property.</p> </div> </body>
