<!doctype html>
<
html
lang
=
"en"
>
<
head
>
<
hyperlink
href
=
<
script
src
=
</
script
>
</
head
>
<
physique
>
<
h1
class
=
"text-success ms-3"
>
GeeksforGeeks
</
h1
>
<
h3
class
=
"ms-3"
>
Bootstrap 5 Show Notation
</
h3
>
<
div
class
=
"container mt-4"
>
<
div
>On this instance:
<
p
class="d-inline-block d-lg-block w-75
border border-success border-3
p-1 mt-2 bg-light">
This half has an inline-block show in
viewport above lg dimension
</
p
>
and we will see it begins on a brand new line
with areas above and beneath it.
</
div
>
<
hr
>
<
div
>On this instance:
<
p
class="d-inline d-lg-inline-block w-75
border border-success
border-3 p-1 mt-2 bg-light">
This half has an inline-block
show in viewport above lg dimension
</
p
>
and we will see it takes up the width and peak
values whereas staying an inline aspect.
</
div
>
<
hr
>
<
div
>On this instance:
<
p
class="d-block d-lg-inline w-50 h-75
border border-success
border-3 p-1 mt-2 bg-light">
This half has an inline show
in viewport above lg dimension
</
p
>
and we will see it doesn't matter what width and peak
values it has it would not change
</
div
>
<
hr
>
<
p
>The beneath instance reveals a flex container show</
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
>
</
physique
>
</
html
>