Products

Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller

Developer

Article Blog Forum Interview Beginner News Startup Quiz

Users

Career

Apply Job Internship

Pricing

Login Sign Up Get a Quote

Bootstrap classes for width, height, margin, padding, shadow

Ethan Karla 669 28 Jul 2021

What are the Bootstrap classes for width, height, margin, padding, shadow?

Ethan Karla

Student

An enthusiastic, adaptive, and fast-learning person with a broad and acute interest in the discovery of new innovative drugs, I particularly enjoy collaborating with scientists from different disciplines to develop new skills and solve new challenges.

1 Answers

Anonymous User 04 Aug 2021

Let's have an example to demonstrate the classes of width, height, margin, padding, shadow 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!

MindStick Training