Bootstrap 5 Display Notation – GeeksforGeeks
<!doctype html>
<html lang="en">
<head>
<link href=
<script src=
</script>
</head>
<body>
<h1 class="text-success ms-3">
GeeksforGeeks
</h1>
<h3 class="ms-3">
Bootstrap 5 Display Notation
</h3>
<div class="container mt-4">
<div>In this example:
<p class="d-inline-block d-lg-block w-75
border border-success border-3
p-1 mt-2 bg-light">
This part has an inline-block display in
viewport above lg size
</p>
and we can see it starts on a new line
with spaces above and below it.
</div>
<hr>
<div>In this example:
<p class="d-inline d-lg-inline-block w-75
border border-success
border-3 p-1 mt-2 bg-light">
This part has an inline-block
display in viewport above lg size
</p>
and we can see it takes up the width and height
values while staying an inline element.
</div>
<hr>
<div>In this example:
<p class="d-block d-lg-inline w-50 h-75
border border-success
border-3 p-1 mt-2 bg-light">
This part has an inline display
in viewport above lg size
</p>
and we can see no matter what width and height
values it has it doesn't change
</div>
<hr>
<p>The below example shows a flex container display</p>
<div class="d-lg-flex gap-2 mt-2 text-light">
<div class="bg-success w-25 border p-1">
Column 1
</div>
<div class="bg-success w-25 border p-1">
Column 2
</div>
<div class="bg-success w-25 border p-1">
Column 3
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<link href=
<script src=
</script>
</head>
<body>
<h1 class="text-success ms-3">
GeeksforGeeks
</h1>
<h3 class="ms-3">
Bootstrap 5 Display Notation
</h3>
<div class="container mt-4">
<div>In this example:
<p class="d-inline-block d-lg-block w-75
border border-success border-3
p-1 mt-2 bg-light">
This part has an inline-block display in
viewport above lg size
</p>
and we can see it starts on a new line
with spaces above and below it.
</div>
<hr>
<div>In this example:
<p class="d-inline d-lg-inline-block w-75
border border-success
border-3 p-1 mt-2 bg-light">
This part has an inline-block
display in viewport above lg size
</p>
and we can see it takes up the width and height
values while staying an inline element.
</div>
<hr>
<div>In this example:
<p class="d-block d-lg-inline w-50 h-75
border border-success
border-3 p-1 mt-2 bg-light">
This part has an inline display
in viewport above lg size
</p>
and we can see no matter what width and height
values it has it doesn't change
</div>
<hr>
<p>The below example shows a flex container display</p>
<div class="d-lg-flex gap-2 mt-2 text-light">
<div class="bg-success w-25 border p-1">
Column 1
</div>
<div class="bg-success w-25 border p-1">
Column 2
</div>
<div class="bg-success w-25 border p-1">
Column 3
</div>
</div>
</div>
</body>
</html>
Denial of responsibility! Techno Blender is an automatic aggregator of the all world’s media. In each content, the hyperlink to the primary source is specified. All trademarks belong to their rightful owners, all materials to their authors. If you are the owner of the content and do not want us to publish your materials, please contact us by email – [email protected]. The content will be deleted within 24 hours.