Professional Documents
Culture Documents
Basic Table
</tr> <td>Dooley</td>
<td>july@example.com</td>
</thead> </tr>
</tbody>
</table>
Bordered Table
The .table-bordered class adds borders on all sides of the table and cells:
Font size
="fw-normal">Normal weight text.</p>
<p class
for lightboxes, user notifications, Bootstrap only supports one modal window at a
The .fade class adds a transition effect which fades the modal in and out.
the .modal-sm class in Bootstrap to set small modal with less width.
Modal content can be any HTML element (divs, headings, paragraphs, images,
etc.).
<!-- Fading modal -->
<div class="modal fade"></div>
Modal Size
Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for
large modals, or .modal-xl for extra large modals.
Add the size class to the <div> element with class .modal-dialog:
Scrolling Modal
When you have a lot of content inside the modal, a scrollbar is added to the
page. See the examples below to understand it:
<div class="modal-dialog">
However, it is possible to only scroll inside the modal, instead of the page itself, by adding .modal-dialog-
scrollable to .modal-dialog:
<div class="modal-dialog modal-dialog-scrollable">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="bg-primary"></div>
<div class="bg-secondary"></div>
<div class="bg-success"></div>
<div class="bg-danger"></div>
<div class="bg-warning"></div>
<div class="bg-info"></div>
<div class="bg-light"></div>
<div class="bg-dark"></div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>