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 734 28 Jul 2021

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

Ask by Ethan Karla

Updated 28 Jul 2021

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

Markdown for AI

A clean, structured version of this page for AI assistants and LLMs.