forum

home / developersection / forums / bootstrap classes for width, height, margin, padding, shadow

Ask Question

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

Ethan Karla 521 28-Jul-2021

What are the Bootstrap classes for width, height, margin, padding, shadow?
bootstrap bootstrap 
Updated on 28-Jul-2021
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.

Follow
Can you answer this question?
Answer

1 Answers

Anonymous User

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
MindStick Training

Liked By

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy