---
title: "Bootstrap classes for width, height, margin, padding, shadow"  
description: "Bootstrap classes for width, height, margin, padding, shadow"  
author: "Ethan Karla"  
published: 2021-07-28  
updated: 2021-07-28  
canonical: https://www.mindstick.com/forum/156628/bootstrap-classes-for-width-height-margin-padding-shadow  
category: "bootstrap"  
tags: ["bootstrap"]  
reading_time: 2 minutes  

---

# Bootstrap classes for width, height, margin, padding, shadow

What are the [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) [classes for width, height, margin, padding, shadow](https://answers.mindstick.com/qa/93877/what-are-the-classes-for-width-height-margin-padding-shadow)?\

## Replies

### Reply by Anonymous User

Let's have an example to demonstrate the classes of width, height, [margin](https://answers.mindstick.com/qa/104990/what-is-a-margin-call), padding, [shadow](https://yourviews.mindstick.com/view/87467/muslims-are-destroying-hindu-villages-under-the-shadow-of-mamta-banerjee) Bootstrap :

```
<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css' rel='stylesheet' integrity='sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC' crossorigin='anonymous'>
    <title>Hello, world!</title>
</head>
<body>
    <div class='w-25 p-1 m-1 border-5 border border-info' style='background-color: #eee;'>Width 25%</div>
    <div class='w-50 p-5 m-5 border-5 border border-info shadow-lg' style='background-color: #eee;'>Width 50%</div>
    <div class='w-75 pt-3 mb-3 border-5 border border-info' style='background-color: #eee;'>Width 75%</div>
    <div class='w-100 pb-3 mt-3 border-5 border border-info shadow-sm' style='background-color: #eee;'>Width 100%</div>
    <div class='w-auto px-3 my-3 border-5 border border-info' style='background-color: #eee;'>Width auto</div>
    <div class='d-flex' style='height: 100px;background-color: rgb(79 255 53 / 10%);'>
        <div class='h-25 mx-1' style='width: 120px;background-color: rgb(255 207 0 / 27%);'>Height 25%</div>
        <div class='h-50 mx-1' style='width: 120px; background-color: rgb(255 207 0 / 27%);'>Height 50%</div>
        <div class='h-75 mx-1' style='width: 120px; background-color: rgb(255 207 0 / 27%);'>Height 75%</div>
        <div class='h-100 mx-1' style='width: 120px; background-color: rgb(255 207 0 / 27%);'>Height 100%</div>
        <div class='h-auto mx-1' style='width: 120px; background-color: rgb(255 207 0 / 27%);'>Height auto</div>
    </div>
    <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js' integrity='sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM' crossorigin='anonymous'></script>
</body>
</html>
```

Hope this will help you.

Happy Coding!


---

Original Source: https://www.mindstick.com/forum/156628/bootstrap-classes-for-width-height-margin-padding-shadow

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
