mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Use <h1> for all modal-title examples/uses (#37210)
* Use `fs-` font sizing classes where needed * Also add info callout about heading hierarchy in modals
This commit is contained in:
Patrick H. Lauke
GitHub
parent
812f891bfc
commit
0a5f6e078c
@ -38,7 +38,7 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
|
||||
<h1 class="modal-title fs-4" id="myModalLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -123,7 +123,7 @@
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="firefoxModalLabel">Firefox Bug Test</h4>
|
||||
<h1 class="modal-title fs-4" id="firefoxModalLabel">Firefox Bug Test</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -147,7 +147,7 @@
|
||||
<div class="modal-dialog" style="transition-duration: inherit;">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
|
||||
<h1 class="modal-title fs-4" id="slowModalLabel">Lorem slowly</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -188,7 +188,7 @@
|
||||
Tall body content to force the page to have a scrollbar.
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">The Bad Modal</h4></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-bs-target attribute of it's show-button</div></div></div></div>">
|
||||
<button type="button" class="btn btn-secondary btn-lg" data-bs-toggle="modal" data-bs-target="<div class="modal fade the-bad" tabindex="-1"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h1 class="modal-title fs-4">The Bad Modal</h1></div><div class="modal-body">This modal's HTTML source code is declared inline, inside the data-bs-target attribute of it's show-button</div></div></div></div>">
|
||||
Modal with an XSS inside the data-bs-target
|
||||
</button>
|
||||
|
||||
|
||||
@ -78,6 +78,10 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
|
||||
</div>
|
||||
```
|
||||
|
||||
{{< callout info >}}
|
||||
In the above static example, we use `<h5>`, to avoid issues with the heading hierarchy in the documentation page. Structurally, however, a modal dialog represents its own separate document/context, so the `.modal-title` should ideally be an `<h1>`. If necessary, you can use the [font size utilities]({{< docsref "/utilities/text#font-size" >}}) to control the heading's appearance. All the following live examples use this approach.
|
||||
{{< /callout >}}
|
||||
|
||||
### Live demo
|
||||
|
||||
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
|
||||
@ -86,7 +90,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLiveLabel">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalLiveLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -117,7 +121,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -140,7 +144,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -171,7 +175,7 @@ When backdrop is set to static, the modal will not close when clicking outside o
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="staticBackdropLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -194,7 +198,7 @@ When modals become too long for the user's viewport or device, they scroll indep
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalLongTitle">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body" style="min-height: 1500px">
|
||||
@ -220,7 +224,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
|
||||
<div class="modal-dialog modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalScrollableTitle">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalScrollableTitle">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -257,7 +261,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalCenterTitle">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -275,7 +279,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -320,14 +324,14 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalPopoversLabel">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalPopoversLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h5>Popover in a modal</h5>
|
||||
<h2 class="fs-5">Popover in a modal</h2>
|
||||
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute." data-bs-container="#exampleModalPopovers">button</a> triggers a popover on click.</p>
|
||||
<hr>
|
||||
<h5>Tooltips in a modal</h5>
|
||||
<h2 class="fs-5">Tooltips in a modal</h2>
|
||||
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip" data-bs-container="#exampleModalPopovers">that link</a> have tooltips on hover.</p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
@ -346,10 +350,10 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
|
||||
|
||||
```html
|
||||
<div class="modal-body">
|
||||
<h5>Popover in a modal</h5>
|
||||
<h2 class="fs-5">Popover in a modal</h2>
|
||||
<p>This <a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
|
||||
<hr>
|
||||
<h5>Tooltips in a modal</h5>
|
||||
<h2 class="fs-5">Tooltips in a modal</h2>
|
||||
<p><a href="#" data-bs-toggle="tooltip" title="Tooltip">This link</a> and <a href="#" data-bs-toggle="tooltip" title="Tooltip">that link</a> have tooltips on hover.</p>
|
||||
</div>
|
||||
```
|
||||
@ -362,7 +366,7 @@ Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` w
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="gridModalLabel">Grids in modals</h5>
|
||||
<h1 class="modal-title fs-5" id="gridModalLabel">Grids in modals</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -453,7 +457,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">New message</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -505,7 +509,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel">Modal 1</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalToggleLabel">Modal 1</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -521,7 +525,7 @@ Toggle between multiple modals with some clever placement of the `data-bs-target
|
||||
<div class="modal-dialog modal-dialog-centered">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalToggleLabel2">Modal 2</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalToggleLabel2">Modal 2</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -595,7 +599,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
|
||||
<div class="modal-dialog modal-xl">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalXlLabel">Extra large modal</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalXlLabel">Extra large modal</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -609,7 +613,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalLgLabel">Large modal</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalLgLabel">Large modal</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -623,7 +627,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
|
||||
<div class="modal-dialog modal-sm">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalSmLabel">Small modal</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalSmLabel">Small modal</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -668,7 +672,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -685,7 +689,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
<div class="modal-dialog modal-fullscreen-sm-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenSmLabel">Full screen below sm</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenSmLabel">Full screen below sm</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -702,7 +706,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
<div class="modal-dialog modal-fullscreen-md-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenMdLabel">Full screen below md</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenMdLabel">Full screen below md</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -719,7 +723,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
<div class="modal-dialog modal-fullscreen-lg-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLgLabel">Full screen below lg</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenLgLabel">Full screen below lg</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -736,7 +740,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
<div class="modal-dialog modal-fullscreen-xl-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenXlLabel">Full screen below xl</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenXlLabel">Full screen below xl</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -753,7 +757,7 @@ Another override is the option to pop up a modal that covers the user viewport,
|
||||
<div class="modal-dialog modal-fullscreen-xxl-down">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenXxlLabel">Full screen below xxl</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
@ -1539,7 +1539,7 @@ direction: rtl
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">عنوان الصندوق العائم</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">عنوان الصندوق العائم</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -1556,7 +1556,7 @@ direction: rtl
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h5>
|
||||
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">عنوان الصندوق العائم</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -1573,7 +1573,7 @@ direction: rtl
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">عنوان الصندوق العائم</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -1596,7 +1596,7 @@ direction: rtl
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">صندوق عائم يملأ الشاشة</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
@ -1535,7 +1535,7 @@ body_class: "bg-light"
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -1552,7 +1552,7 @@ body_class: "bg-light"
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="staticBackdropLiveLabel">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="staticBackdropLiveLabel">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -1569,7 +1569,7 @@ body_class: "bg-light"
|
||||
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="exampleModalCenteredScrollableTitle">Modal title</h5>
|
||||
<h1 class="modal-title fs-5" id="exampleModalCenteredScrollableTitle">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
@ -1588,7 +1588,7 @@ body_class: "bg-light"
|
||||
<div class="modal-dialog modal-fullscreen">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title h4" id="exampleModalFullscreenLabel">Full screen modal</h5>
|
||||
<h1 class="modal-title fs-4" id="exampleModalFullscreenLabel">Full screen modal</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
@ -59,7 +59,7 @@ body_class: ""
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-header border-bottom-0">
|
||||
<h5 class="modal-title">Modal title</h5>
|
||||
<h1 class="modal-title fs-5">Modal title</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body py-0">
|
||||
@ -133,8 +133,8 @@ body_class: ""
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content rounded-4 shadow">
|
||||
<div class="modal-header p-5 pb-4 border-bottom-0">
|
||||
<!-- <h5 class="modal-title">Modal title</h5> -->
|
||||
<h2 class="fw-bold mb-0">Sign up for free</h2>
|
||||
<!-- <h1 class="modal-title fs-5" >Modal title</h1> -->
|
||||
<h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user