Tables
Documentation and examples for opt-in styling of tables (given their prevalent use in JavaScript plugins) with Bootstrap.
https://getbootstrap.com/docs/5.1/content/tables/Table Basic
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table Stripped
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table Hover
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table Borderless
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table Border Color
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-bordered border-primary">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table Small
| # | First | Last | Handle |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry the Bird | ||
<table class="table table-sm">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
Table Variants
| Class | Heading | Heading |
|---|---|---|
| Default | Cell | Cell |
| Primary | Cell | Cell |
| Secondary | Cell | Cell |
| Success | Cell | Cell |
| Danger | Cell | Cell |
| Warning | Cell | Cell |
| Info | Cell | Cell |
| Light | Cell | Cell |
| Dark | Cell | Cell |
<!-- On tables -->
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
<!-- On rows -->
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Table Advanced
(based on: SOW Form Advanced)
<form class="bs-validate" novalidate="" id="form_id" method="post" action="#">
<!--
IMPORTANT
The "action" hidden input is updated by javascript according to button params/action:
data-js-form-advanced-hidden-action-id="#action"
data-js-form-advanced-hidden-action-value="delete"
In your backend, should process data like this (PHP example):
if($_POST['action'] === 'delete') {
foreach($_POST['item_id'] as $item_id) {
// ... delete $item_id from database
}
}
-->
<input type="hidden" id="action" name="action" value=""><!-- value populated by js -->
<div class="table-responsive">
<table class="table table-framed">
<thead>
<tr>
<th class="text-gray-500" style="width:50px">
<div class="form-check"><!-- check all -->
<input data-checkall-container="#item_list" class="checkall form-check-input" type="checkbox">
</div>
</th>
<th class="text-gray-700 fw-medium small" style="width:120px"> </th>
<th class="text-gray-700 fw-medium small">PRODUCT NAME</th>
<th class="text-gray-700 fw-medium small" style="width:200px">PRICE</th>
<th class="text-gray-700 fw-medium small text-center" style="width:120px">BRAND</th>
<th class="text-gray-700 fw-medium small text-center" style="width:100px">STATUS</th>
<th class="text-gray-700 fw-medium small text-align-end" style="width:60px"> </th>
</tr>
</thead>
<!-- #item_list used by checkall: data-checkall-container="#item_list" -->
<tbody id="item_list">
<!-- product -->
<tr>
<!-- check item -->
<th>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="item_id[]" value="1">
</div>
</th>
<!-- image -->
<td>
<img src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash-100px.jpg" class="img-fluid" alt="...">
</td>
<!-- product name -->
<td>
<a href="#">
Nike Air Max Thea Glitter
</a>
<span class="d-block text-muted small">SKU-123456</span>
<span class="d-block text-muted small mt-3">Sales: 233, Visits: 987, Reviews: 5</span>
<span class="d-block text-gray-500 small">Last Edit: Sep 26 2019 / 11:51am</span>
</td>
<!-- price -->
<td>
<span class="d-block text-danger fs-6">
<sup>*</sup>Price: 10.00
<sup class="text-muted smaller">USD</sup>
</span>
<span class="d-block text-success fs-6">
Promo: 9.99
<sup class="text-muted smaller">USD</sup>
</span>
<span class="d-block small mt-3 text-muted">
<sup>**</sup> Inventory: 210
</span>
<span class="d-block text-muted small">
Variants: 6
</span>
</td>
<!-- brand -->
<td class="text-muted text-center">
Nike
</td>
<!-- status -->
<td class="text-center">
<a href="#" class="text-success btn btn-sm p-0">
Active
</a>
</td>
<!-- options -->
<td class="text-align-end">
<div class="dropstart">
<a href="#" class="btn btn-sm btn-light rounded-circle" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="group-icon">
<i class="fi fi-dots-vertical-full"></i>
<i class="fi fi-close"></i>
</span>
</a>
<div class="dropdown-menu dropdown-menu-clean dropdown-click-ignore max-w-220">
<div class="scrollable-vertical max-vh-50">
<a class="dropdown-item text-truncate" href="#">
<i class="fi fi-pencil"></i>
Edit
</a>
<a href="#"
class="dropdown-item text-truncate js-ajax-confirm"
data-href="components-tables.html"
data-ajax-confirm-method="GET"
data-ajax-confirm-mode="ajax"
data-ajax-confirm-size="modal-md"
data-ajax-confirm-centered="false"
data-ajax-confirm-callback-function=""
data-ajax-confirm-title="Please Confirm"
data-ajax-confirm-body="Set this product to active?"
data-ajax-confirm-btn-yes-text="Confirm"
data-ajax-confirm-btn-yes-class="btn-sm btn-success"
data-ajax-confirm-btn-yes-icon="fi fi-check"
data-ajax-confirm-btn-no-text="Cancel"
data-ajax-confirm-btn-no-class="btn-sm btn-light"
data-ajax-confirm-btn-no-icon="fi fi-close">
<i class="fi fi-check"></i>
Set : Active
</a>
<a href="#"
class="dropdown-item text-truncate js-ajax-confirm"
data-href="components-tables.html"
data-ajax-confirm-method="GET"
data-ajax-confirm-mode="ajax"
data-ajax-confirm-size="modal-md"
data-ajax-confirm-centered="false"
data-ajax-confirm-callback-function=""
data-ajax-confirm-title="Please Confirm"
data-ajax-confirm-body="Are you sure? Set this product to inactive?"
data-ajax-confirm-btn-yes-text="Confirm"
data-ajax-confirm-btn-yes-class="btn-sm btn-warning"
data-ajax-confirm-btn-yes-icon="fi fi-check"
data-ajax-confirm-btn-no-text="Cancel"
data-ajax-confirm-btn-no-class="btn-sm btn-light"
data-ajax-confirm-btn-no-icon="fi fi-close">
<i class="fi fi-close"></i>
Set : Inactive
</a>
<!--
The request is sent by ajax to data-href="..."
To change to regular submit, change:
data-ajax-confirm-mode="regular" (or simply remove this param)
-->
<a href="#"
class="dropdown-item text-truncate js-ajax-confirm"
data-href="components-tables.html"
data-ajax-confirm-method="GET"
data-ajax-confirm-mode="ajax"
data-ajax-confirm-size="modal-md"
data-ajax-confirm-centered="false"
data-ajax-confirm-callback-function=""
data-ajax-confirm-title="Please Confirm"
data-ajax-confirm-body="Are you sure? Delete this product? <span class='d-block smaller mt-1'>Please note: this is a permanent action!</span>"
data-ajax-confirm-btn-yes-text="Confirm"
data-ajax-confirm-btn-yes-class="btn-sm btn-danger"
data-ajax-confirm-btn-yes-icon="fi fi-check"
data-ajax-confirm-btn-no-text="Cancel"
data-ajax-confirm-btn-no-class="btn-sm btn-light"
data-ajax-confirm-btn-no-icon="fi fi-close">
<i class="fi fi-thrash text-danger"></i>
Set : Delete
</a>
</div>
</div>
</div>
</td>
</tr>
<!-- /product -->
<!-- product -->
<tr>
<!-- check item -->
<th>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="item_id[]" value="2">
</div>
</th>
<!-- image -->
<td>
<img src="../demo.files/images/unsplash/brooke-cagle-g1Kr4Ozfoac-unsplash-100px.jpg" class="img-fluid" alt="...">
</td>
<!-- product name -->
<td>
<a href="#">
Adidas - running faster than you can
</a>
<span class="d-block text-muted small">SKU-123456</span>
<span class="d-block text-muted small mt-3">Sales: 233, Visits: 987, Reviews: 5</span>
<span class="d-block text-gray-500 small">Last Edit: Sep 26 2019 / 11:51am</span>
</td>
<!-- price -->
<td>
<span class="d-block text-danger fs-6">
Price: 59.00
<sup class="text-muted smaller">USD</sup>
</span>
<span class="d-block small mt-3 text-muted">
Inventory: 19
</span>
</td>
<!-- brand -->
<td class="text-muted text-center">
Adidas
</td>
<!-- status -->
<td class="text-center">
<a href="#" class="text-success btn btn-sm p-0">
Active
</a>
</td>
<!-- options -->
<td class="text-align-end">
<div class="dropstart">
<a href="#" class="btn btn-sm btn-light rounded-circle" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="group-icon">
<i class="fi fi-dots-vertical-full"></i>
<i class="fi fi-close"></i>
</span>
</a>
<div class="dropdown-menu dropdown-menu-clean dropdown-click-ignore">
<div class="scrollable-vertical max-vh-50">
<a class="dropdown-item text-truncate" href="#">
<i class="fi fi-pencil"></i>
Edit
</a>
<a href="#"
class="dropdown-item text-truncate js-ajax-confirm"
data-href="components-tables.html"
data-ajax-confirm-method="GET"
data-ajax-confirm-mode="ajax"
data-ajax-confirm-size="modal-md"
data-ajax-confirm-centered="false"
data-ajax-confirm-callback-function=""
data-ajax-confirm-title="Please Confirm"
data-ajax-confirm-body="Set this product to active?"
data-ajax-confirm-btn-yes-text="Confirm"
data-ajax-confirm-btn-yes-class="btn-sm btn-success"
data-ajax-confirm-btn-yes-icon="fi fi-check"
data-ajax-confirm-btn-no-text="Cancel"
data-ajax-confirm-btn-no-class="btn-sm btn-light"
data-ajax-confirm-btn-no-icon="fi fi-close">
<i class="fi fi-check"></i>
Set : Active
</a>
<a href="#"
class="dropdown-item text-truncate js-ajax-confirm"
data-href="components-tables.html"
data-ajax-confirm-method="GET"
data-ajax-confirm-mode="ajax"
data-ajax-confirm-size="modal-md"
data-ajax-confirm-centered="false"
data-ajax-confirm-callback-function=""
data-ajax-confirm-title="Please Confirm"
data-ajax-confirm-body="Are you sure? Set this product to inactive?"
data-ajax-confirm-btn-yes-text="Confirm"
data-ajax-confirm-btn-yes-class="btn-sm btn-warning"
data-ajax-confirm-btn-yes-icon="fi fi-check"
data-ajax-confirm-btn-no-text="Cancel"
data-ajax-confirm-btn-no-class="btn-sm btn-light"
data-ajax-confirm-btn-no-icon="fi fi-close">
<i class="fi fi-close"></i>
Set : Inactive
</a>
<!--
The request is sent by ajax to data-href="..."
To change to regular submit, change:
data-ajax-confirm-mode="regular" (or simply remove this param)
-->
<a href="#"
class="dropdown-item text-truncate js-ajax-confirm"
data-href="components-tables.html"
data-ajax-confirm-method="GET"
data-ajax-confirm-mode="ajax"
data-ajax-confirm-size="modal-md"
data-ajax-confirm-centered="false"
data-ajax-confirm-callback-function=""
data-ajax-confirm-title="Please Confirm"
data-ajax-confirm-body="Are you sure? Delete this product? <span class='d-block smaller mt-1'>Please note: this is a permanent action!</span>"
data-ajax-confirm-btn-yes-text="Confirm"
data-ajax-confirm-btn-yes-class="btn-sm btn-danger"
data-ajax-confirm-btn-yes-icon="fi fi-check"
data-ajax-confirm-btn-no-text="Cancel"
data-ajax-confirm-btn-no-class="btn-sm btn-light"
data-ajax-confirm-btn-no-icon="fi fi-close">
<i class="fi fi-thrash text-danger"></i>
Set : Delete
</a>
</div>
</div>
</div>
</td>
</tr>
<!-- /product -->
</tbody>
<tfoot>
<tr>
<th class="text-gray-500" style="width:50px">
<div class="form-check"><!-- check all -->
<input data-checkall-container="#item_list" class="checkall form-check-input" type="checkbox">
</div>
</th>
<th class="text-gray-700 fw-medium small" style="width:120px"> </th>
<th class="text-gray-700 fw-medium small">PRODUCT NAME</th>
<th class="text-gray-700 fw-medium small" style="width:200px">PRICE</th>
<th class="text-gray-700 fw-medium small text-center" style="width:120px">BRAND</th>
<th class="text-gray-700 fw-medium small text-center" style="width:100px">STATUS</th>
<th class="text-gray-700 fw-medium small text-align-end" style="width:60px"> </th>
</tr>
</tfoot>
</table>
</div>
<!-- options and pagination -->
<div class="mt-4 text-center-xs">
<div class="row">
<div class="col-12 col-md-6 mt-4">
<!-- SELECTED ITEMS -->
<div class="clearfix"><!-- using .dropdown, autowidth not working -->
<a href="#" class="btn btn-sm btn-primary rounded-pill" data-bs-toggle="dropdown" aria-expanded="false" aria-haspopup="true">
<span class="group-icon">
<i class="fi fi-dots-vertical-full"></i>
<i class="fi fi-close"></i>
</span>
<span>Selected Products</span>
</a>
<div class="dropdown-menu dropdown-menu-clean dropdown-click-ignore max-w-250">
<div class="scrollable-vertical max-vh-50">
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="active"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Products Selected!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-required-custom-modal=""
data-js-form-advanced-bulk-required-custom-modal-content-ajax=""
data-js-form-advanced-bulk-required-modal-type="success"
data-js-form-advanced-bulk-required-modal-size="modal-md"
data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm"
data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}"
data-js-form-advanced-bulk-required-modal-txt-body-txt="Set active {{no_selected}} selected products?"
data-js-form-advanced-bulk-required-modal-txt-body-info=""
data-js-form-advanced-bulk-required-modal-btn-text-yes="Confirm"
data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel"
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-check"></i>
Set : Active
</a>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="inactive"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Products Selected!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-required-custom-modal=""
data-js-form-advanced-bulk-required-custom-modal-content-ajax=""
data-js-form-advanced-bulk-required-modal-type="warning"
data-js-form-advanced-bulk-required-modal-size="modal-md"
data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm"
data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}"
data-js-form-advanced-bulk-required-modal-txt-body-txt="Set inactive {{no_selected}} selected products?"
data-js-form-advanced-bulk-required-modal-txt-body-info=""
data-js-form-advanced-bulk-required-modal-btn-text-yes="Confirm"
data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel"
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-close"></i>
Set : Inactive
</a>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="delete"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Products Selected!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-required-custom-modal=""
data-js-form-advanced-bulk-required-custom-modal-content-ajax=""
data-js-form-advanced-bulk-required-modal-type="danger"
data-js-form-advanced-bulk-required-modal-size="modal-md"
data-js-form-advanced-bulk-required-modal-txt-title="Please Confirm"
data-js-form-advanced-bulk-required-modal-txt-subtitle="Selected Products: {{no_selected}}"
data-js-form-advanced-bulk-required-modal-txt-body-txt="Are you sure? Delete {{no_selected}} selected products?"
data-js-form-advanced-bulk-required-modal-txt-body-info="Please note: this is a permanent action!"
data-js-form-advanced-bulk-required-modal-btn-text-yes="Yes, Delete"
data-js-form-advanced-bulk-required-modal-btn-text-no="Cancel"
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-thrash text-danger"></i>
Set : Delete
</a>
<div class="dropdown-divider"></div>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="myactionhere3"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Products Selected!"
data-js-form-advanced-bulk-required-txt-position="top-center"
data-js-form-advanced-bulk-submit-without-confirmation="true"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-mollecules text-danger"></i>
Submit : No Confirm.
</a>
<div class="dropdown-divider"></div>
<a href="#"
class="dropdown-item text-truncate js-form-advanced-bulk"
data-js-form-advanced-bulk-hidden-action-id="#action"
data-js-form-advanced-bulk-hidden-action-value="myactionhere1"
data-js-form-advanced-bulk-container-items="#item_list"
data-js-form-advanced-bulk-required-selected="true"
data-js-form-advanced-bulk-required-txt-error="No Products Selected!"
data-js-form-advanced-bulk-required-custom-modal="#my_custom_modal"
data-js-form-advanced-bulk-required-custom-modal-content-ajax=""
data-js-form-advanced-bulk-submit-without-confirmation="false"
data-js-form-advanced-form-id="#form_id">
<i class="fi fi-heart-slim text-success"></i>
Inline Custom Modal
</a>
</div>
</div>
</div>
<!-- /SELECTED ITEMS -->
<!-- Inline custom modal (should stay inside <form> to be able to post data) -->
<div class="modal fade show" id="my_custom_modal" role="dialog" tabindex="-1" aria-labelledby="modal-title-confirm" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<!--
Header color - optional
.bg-[primary|danger|warning|success|info|pink|indigo]-soft
-->
<div class="modal-header border-0 bg-primary-soft">
<h5 id="modal-title-confirm" class="modal-title fw-light fs-5">
Inline custom modal
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<!-- /header -->
<!-- body -->
<div class="modal-body py-5">
Selected items: <span class="js-form-advanced-selected-items">0</span>
<h5>Customize as you like!</h5>
<!-- FILE UPLOADER -->
<div class="clearfix">
<!--
2. AJAX UPLOAD : DYNAMIC PROGRESS UNDER BUTTON
No any extra html code needed for the progress bar.
-->
<label class="btn btn-warning btn-sm cursor-pointer position-relative">
<!--
We use .absolute-full class instead of .viewport-out
Just to make sure the element is working crossbrowser!
.show-hover-container = show delete button only on hover (always visible on mobile)
-->
<input name="ajax_files_progress_dynamic[]"
multiple=""
type="file"
data-file-ext="jpg,png,gif"
data-file-max-size-kb-per-file="3000"
data-file-max-size-kb-total="5000"
data-file-max-total-files="3"
data-file-ext-err-msg="Allowed:"
data-file-exist-err-msg="File already exists:"
data-file-size-err-item-msg="File too large!"
data-file-size-err-total-msg="Total allowed size exceeded!"
data-file-size-err-max-msg="Maximum allowed files:"
data-file-toast-position="bottom-center"
data-file-preview-container=".js-form-advanced-container-table-form-test"
data-file-preview-img-height="120"
data-file-preview-show-info="true"
data-file-preview-class="show-hover-container shadow-md m-2 rounded float-start"
data-file-preview-img-cover="false"
data-file-btn-clear="a.js-form-advanced-btn-multiple-ajax-remove"
data-file-ajax-upload-enable="true"
data-file-ajax-upload-url="../demo.files/php/demo.ajax_file_upload.php"
data-file-ajax-upload-params="['action','upload']['param2','value2']"
data-file-ajax-delete-enable="true"
data-file-ajax-delete-url="../demo.files/php/demo.ajax_file_upload.php"
data-file-ajax-delete-params="['action','delete_file']"
data-file-ajax-reorder-enable="true"
data-file-ajax-reorder-url="../demo.files/php/demo.ajax_file_upload.php"
data-file-ajax-reorder-params="['action','reorder']"
data-file-ajax-reorder-toast-success="Order Saved!"
data-file-ajax-reorder-toast-position="bottom-center"
data-file-ajax-toast-success-txt="Successfully Uploaded!"
data-file-ajax-toast-error-txt="One or more files not uploaded!"
data-file-ajax-callback-function=""
data-file-ajax-progressbar-custom=""
data-file-ajax-progressbar-disable="false"
class="custom-file-input absolute-full">
<span class="group-icon">
<i class="fi fi-arrow-upload"></i>
<i class="fi fi-circle-spin fi-spin"></i>
</span>
<span>Ajax Uploader</span>
</label>
<div class="js-form-advanced-container-table-form-test position-relative mt-3 clearfix hide-empty"></div>
<small class="d-block text-gray-400">Upload few images and then... reorder them :)</small>
</div>
<!-- /FILE UPLOADER -->
<br>
<small>Yes, ajax content for modals also supported!</small><br>
<small>Check <a href="plugins-sow-form-advanced.html" class="js-ajax link-muted">SOW : Form Advanced</a> for more & documentation!</small>
</div>
<!-- /body -->
<!-- footer ; buttons -->
<div class="modal-footer">
<!-- submit button - actually submitting the form -->
<button type="submit" class="btn pt-10 pb-10 fs-6 btn-primary">
<i class="fi fi-check"></i> Oh, Great!
</button>
<!-- cancel|close button -->
<a href="#" class="btn pt-10 pb-10 fs-6 btn-light" data-bs-dismiss="modal">
<i class="fi fi-close"></i> Close
</a>
</div>
<!-- /footer ; buttons -->
</div>
</div>
</div>
<!-- /Inline custom modal -->
</div>
<div class="col-12 col-md-6 mt-4">
<!-- pagination -->
<nav aria-label="pagination">
<ul class="pagination pagination-pill justify-content-end justify-content-center justify-content-md-end">
<li class="page-item disabled btn-pill ">
<a class="page-link" href="#" tabindex="-1">Prev</a>
</li>
<li class="page-item active" aria-current="page">
<a class="page-link" href="#">1 <span class="visually-hidden">(current)</span></a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next</a>
</li>
</ul>
</nav>
<!-- pagination -->
</div>
</div>
</div>
<!-- /options and pagination -->
</form>