Bootstrap Modals: Explore Large, Bootstrap 4 & 5 Examples

Modal

Bootstrap Modals are dynamic UI overlays that provide a way to present content directly on top of the main page. They are highly significant in modern web design for enhancing user interaction by offering a focused area for forms, details, and additional user tasks. Key elements of a modal include the header, body, and footer, each playing a crucial role in delivering a complete and functional modal experience.

Key Elements of a Modal

Modal Header: This is typically where the title of the modal is displayed, along with a close button. It sets the context for the modal’s content.
Modal Body: The primary content area of the modal. This is where you place text, forms, or any other information relevant to the modal’s purpose.
Modal Footer: Usually contains action items like ‘Save’, ‘Submit’, or ‘Close’. It’s the area for interaction and decision-making.

Implementing a Standard Modal

A standard modal in Bootstrap serves as a multipurpose overlay for displaying content, such as text, forms, and images. It’s typically used for gathering input, confirming actions, or presenting information in a focused manner.

Creating the Modal: Start by adding a div with the class modal and an ID. This will be your modal container.
Triggering the Modal: Use a button or link with data-toggle=”modal” and data-target=”#yourModalId” attributes to open the modal.
Adding Header, Body, and Footer: Inside the modal, add divs with classes modal-header, modal-body, and modal-footer. Populate these with relevant content.

Example 1: Basic Bootstrap Modal

<!– Trigger Button –>

Open Basic Modal

</button>

<!– Basic Modal –>

<h5 class=”modal-title” id=”basicModalLabel”>Basic Modal</h5>

</button>

</div>

Content goes here…

</div>

<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>

<button type=”button” class=”btn btn-primary”>Save Changes</button>

</div>

Explanation:

The modal is triggered by a button (data-toggle=”modal” and data-target=”#basicModal”).
Inside the modal (#basicModal), the structure is divided into header, body, and footer.
The header contains the title and a close button. The body is for the main content, and the footer typically has action buttons.

Example 2: Modal with Form

<!– Trigger Button –>

Open Modal with Form

</button>

<!– Modal with Form –>

<h5 class=”modal-title” id=”formModalLabel”>Modal with Form</h5>

</button>

</div>

<form>

<!– Form fields here –>

</form>

</div>

Explanation:

Similar to the basic modal, this one includes a form within the modal body.
It’s ideal for scenarios like user login, data entry, or feedback collection.

Non-Dismissible Modals with Static Backdrop

Sometimes, it’s necessary to prevent users from closing the modal by clicking outside of it. This is where a non-dismissible modal with a static backdrop comes into play.

Example 1: Modal with Static Backdrop

<!– Trigger Button –>

Open Static Backdrop Modal

</button>

<!– Static Backdrop Modal –>

<h5 class=”modal-title” id=”staticBackdropLabel”>Static Backdrop Modal</h5>

</div>

User can’t close this modal by clicking outside.

</div>

<button type=”button” class=”btn btn-primary” data-dismiss=”modal”>Close</button>

</div>

Explanation:

data-backdrop=”static” prevents the modal from closing when the user clicks outside of it.
This type of modal ensures that the user’s focus remains on the modal content until an explicit action is taken.

Example 2: Non-Dismissible Modal without Close Button

<!– Trigger Button –>

Open Non-Dismissible Modal

</button>

<!– Non-Dismissible Modal –>

<h5 class=”modal-title” id=”nonDismissibleLabel”>Non-Dismissible Modal</h5>

</div>

This modal can’t be closed by clicking outside or pressing ESC key.

</div>

Explanation:

Along with data-backdrop=”static”, data-keyboard=”false” is used to prevent closing the modal with the keyboard (like the ESC key).
This setup ensures the modal remains active until a specific action within the modal is completed, like submitting a form or confirming a decision.

Due to the extensive nature of your request, I’ll cover two points in detail, providing a description and two examples for each, with thorough explanations.

Creating Scroll-Friendly Modals

For content-heavy modals, enabling vertical scrolling within the modal body is crucial to maintain usability. The `.modal-dialog-scrollable` class allows for a scrollable modal body, ensuring that the modal’s header and footer remain fixed while the body content can be scrolled.

Example 1: Basic Scrollable Modal

<!– Trigger Button –>

Launch Scrollable Modal

</button>

<!– Scrollable Modal –>

<h5 class=”modal-title” id=”scrollableModalLabel”>Scrollable Modal</h5>

</button>

</div>

<!– Long content here –>

</div>

<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>

<button type=”button” class=”btn btn-primary”>Save Changes</button>

</div>

Explanation:

– This example demonstrates a modal with a scrollable body. The modal is triggered by a button.

– The `.modal-dialog-scrollable` class ensures that the content within `.modal-body` can be scrolled.

– The header and footer of the modal remain fixed while scrolling.

Example 2: Scrollable Modal with Dynamic Content

<!– Trigger Button –>

Open Modal with Dynamic Content

</button>

<!– Scrollable Modal with Dynamic Content –>

<h5 class=”modal-title” id=”dynamicContentModalLabel”>Dynamic Content Modal</h5>

</button>

</div>

<!– JavaScript generated dynamic content here –>

</div>

<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>

</div>

Explanation:

– In this modal, the content of the `.modal-body` is assumed to be dynamically generated and potentially lengthy.

– The use of `.modal-dialog-scrollable` is crucial here to manage the varying lengths of content without affecting the overall modal layout.

Integrating Tooltips in Modals

Describe: Tooltips within modals can enhance the user experience by providing additional information without cluttering the modal’s layout. Bootstrap tooltips can be easily integrated into modal elements like buttons, links, or icons.

Example 1: Modal with Tooltips on Buttons

<!– Trigger Modal Button –>

Open Modal with Tooltips

</button>

<!– Modal with Tooltips –>

<h5 class=”modal-title” id=”tooltipModalLabel”>Modal with Tooltips</h5>

</button>

</div>

Tooltip on top

</button>

</div>

Explanation:

– The modal contains a button with a tooltip. The tooltip is initialized with `data-toggle=”tooltip”`.

– The `title` attribute is used to specify the tooltip’s text, and `data-placement` defines its position relative to the button.

Example 2: Modal with Tooltips on Text

<!– Trigger Modal Button –>

Launch Modal with Text Tooltips

</button>

<!– Modal with Text Tooltips –>

<h5 class=”modal-title” id=”textTooltipModalLabel”>Text Tooltips in Modal</h5>

</button>

</div>

<p data-toggle=”tooltip” data-placement=”right” title=”Additional info here”>Hover over this text for tooltip</p>

</div>

Explanation:

– This example shows a tooltip integrated with a text element inside a modal.

– Similar to the button example, the tooltip is attached to a paragraph element, providing additional information when hovered over.

In both examples, tooltips enhance the functionality of the modal by providing extra context where needed. Remember to initialize the tooltips using Bootstrap’s JavaScript or jQuery to activate them.

Centering Modals Vertically

Vertically centering modals can improve the aesthetic appeal of a webpage and focus the user’s attention more effectively. Bootstrap provides a simple way to vertically align modals in the center of the screen, regardless of the content height.

Example 1: Basic Vertically Centered Modal

<!– Trigger Button –>

Launch Centered Modal

</button>

<!– Vertically Centered Modal –>

<h5 class=”modal-title” id=”centeredModalLabel”>Centered Modal</h5>

</button>

</div>

Content of the centered modal.

</div>

<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>

<button type=”button” class=”btn btn-primary”>Save changes</button>

</div>

Explanation:

– The `.modal-dialog-centered` class is added to the `.modal-dialog` div, which vertically centers the modal on the page.

– This setup works well for modals that need to stand out prominently on the page, regardless of the user’s scroll position.

Example 2: Vertically Centered Modal with Dynamic Content

<!– Trigger Button –>

Open Dynamic Centered Modal

</button>

<!– Dynamic Centered Modal –>

<!– Modal Header –>

<h5 class=”modal-title” id=”dynamicCenteredModalLabel”>Dynamic Content Modal</h5>

</button>

</div>

<!– Modal Body –>

<!– Dynamic content here –>

</div>

<!– Modal Footer –>

<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>

<button type=”button” class=”btn btn-primary”>Save changes</button>

</div>

Explanation:

– This modal also uses `.modal-dialog-centered` for vertical centering.

– The modal is designed to handle dynamic content, making it suitable for scenarios where the amount of content can change, such as user-generated data or varying text lengths.

Embedding Popovers in Modals

Popovers can be embedded within modals to provide additional information or interactive content. They are especially useful for offering more details about certain elements without leaving the context of the modal.

Example 1: Modal with Popover on Button

<!– Trigger Modal –>

Launch Modal with Popover

</button>

<!– Modal with Popover –>

<h5 class=”modal-title” id=”popoverModalLabel”>Modal with Popover</h5>

</button>

</div>

<button type=”button” class=”btn btn-secondary” data-container=”#popoverModal” data-toggle=”popover” data-placement=”top” data-content=”Here’s some popover content.”>Click for Popover</button>

</div>

$(document).ready(function(){

$(‘[data-toggle=”popover”]’).popover();

});

</script>

Explanation:

– Inside the modal, a button is configured to trigger a popover (`data-toggle=”popover”`).

– The `data-container` attribute is set to the modal’s ID, ensuring the popover is displayed within the modal context.

– JavaScript is used to initialize the popover functionality.

Example 2: Modal with Popovers on Text Elements

<!– Trigger Modal –>

Open Modal with Text Popovers

</button>

<!– Modal with Text Popovers –>

<h5 class=”modal-title” id=”textPopoverModalLabel”>Text Popovers in Modal</h5>

</button>

</div>

<p data-toggle=”popover” title=”Popover Title” data-content=”Popover content on text.”>Hover over this text for popover.</p>

</div>

$(document).ready(function(){

$(‘[data-toggle=”popover”]’).popover();

});

</script>

Explanation:

– A text element within the modal body is set up to display a popover when hovered over.

– The popover is initialized with JavaScript, and it’s configured to show additional information relevant to the text.

In both examples, popovers add an interactive layer to the modal content, enhancing the user experience by providing contextual information without overcrowding the modal’s layout. They are particularly useful for explaining specific terms, providing help text, or displaying supplementary content.

Incorporating Grid Layouts in Modal Bodies

Utilizing Bootstrap’s grid system within a modal’s body can greatly enhance the organization and responsiveness of the content. It allows for a structured layout, dividing the modal into sections, columns, and rows which adapt to different screen sizes.

Example 1: Modal with Two-Column Grid Layout

<!– Trigger Button –>

Open Modal with Grid Layout

</button>

<!– Modal with Grid Layout –>

<h5 class=”modal-title” id=”gridModalLabel”>Grid Layout in Modal</h5>

</button>

</div>

<div class=”col-md-6″>Left Column Content</div>

<div class=”col-md-6″>Right Column Content</div>

</div>

Explanation:

– The modal body includes a `.container-fluid` class, ensuring the grid layout is responsive.

– Inside the container, a row is defined with `.row`, and two columns are created using `.col-md-6`. This layout means that each column takes up half the width of the modal on medium to larger screens,
and stacks vertically on smaller screens.

Example 2: Modal with Complex Grid Layout

<!– Trigger Button –>

Launch Complex Grid Modal

</button>

<!– Complex Grid Modal –>

<h5 class=”modal-title” id=”complexGridModalLabel”>Complex Grid Layout in Modal</h5>

</button>

</div>

<div class=”col-md-4″>Content A</div>

<div class=”col-md-4″>Content B</div>

<div class=”col-md-4″>Content C</div>

</div>

<div class=”col-md-8″>Content D</div>

<div class=”col-md-4″>Content E</div>

</div>

Explanation:

– This modal features a more complex grid layout within the `.container-fluid`.

– The first row contains three columns (`col-md-4`), each taking up one-third of the modal’s width on medium and larger screens.

– The second row has two columns with a 2:1 width ratio, achieved by using `col-md-8` and `col-md-4`.

These examples demonstrate how Bootstrap’s grid system can be effectively used within modals to create responsive and organized layouts, suitable for a variety of content arrangements.

Adapting Modal Content Dynamically

Dynamically updating the content of a modal makes it a versatile tool, capable of handling various types of content and user interactions. This can be done by manipulating the modal’s DOM elements through JavaScript or by loading content from a server.

Example 1: Updating Modal Content with JavaScript

<!– Trigger Button –>

Open Modal with Dynamic Content

</button>

<!– Dynamic Content Modal –>

<h5 class

=”modal-title” id=”dynamicModalLabel”>Dynamic Content Modal</h5>

</button>

</div>

Initial content…

</div>

function updateModalContent() {

document.getElementById(‘dynamicModalBody’).innerHTML = ‘Updated content…’;

}

</script>

Explanation:

– The modal is initially loaded with default content.

– When the modal is triggered (`onclick=”updateModalContent()”`), the `updateModalContent` JavaScript function updates the content of the modal body.

– The `innerHTML` property of the modal’s body element (`dynamicModalBody`) is used to set new content dynamically.

Example 2: Loading Content from Server into Modal

<!– Trigger Button –>

Load Content from Server

</button>

<!– Server Content Modal –>

<h5 class=”modal-title” id=”serverContentModalLabel”>Server Content Modal</h5>

</button>

</div>

<!– Server content will be loaded here –>

</div>

function loadServerContent() {

// Example AJAX call to load content from the server

fetch(‘path/to/server/content’)

.then(response => response.text())

.then(data => document.getElementById(‘serverModalBody’).innerHTML = data)

.catch(error => console.error(‘Error:’, error));

}

</script>

Explanation:

– In this example, when the modal is triggered, the `loadServerContent` function is called.

– The function makes an AJAX request to a server endpoint (`fetch(‘path/to/server/content’)`) to retrieve content.

– The retrieved content is then dynamically inserted into the modal body (`serverModalBody`).

These examples showcase the flexibility of Bootstrap modals to adapt and present content dynamically, either through client-side JavaScript manipulation or server-side content loading. This makes modals suitable for a wide range of interactive and responsive web applications.

Designing Modals Without Animations

While animations can enhance user experience, there are scenarios where a modal without animation is preferred, such as when aiming for a minimalist design or when animations may cause distractions. Removing animations from Bootstrap modals is straightforward and can be achieved by omitting the `fade` class.

Example 1: Modal Without Animation on Open and Close

<!– Trigger Button –>

Open Modal Without Animation

</button>

<!– Modal Without Animation –>

<h5 class=”modal-title” id=”noAnimationModalLabel”>Non-Animated Modal</h5>

</button>

</div>

This modal opens and closes instantly without any animation.

</div>

<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>

<button type=”button” class=”btn btn-primary”>Save Changes</button>

</div>

Explanation:

– By not including the `fade` class in the modal div (`#noAnimationModal`), the modal will appear and disappear instantly without any transitional effect.

– This is ideal for users who prefer a quick and immediate response without the extra visual effect of an animation.

Example 2: Instantly Appearing Modal for Alert Messages

<!– Trigger Button –>

Show Alert Modal

</button>

<!– Alert Modal Without Animation –>

<h5 class=”modal-title” id=”alertModalLabel”>Alert</h5>

</div>

Immediate alert message without any fade-in effect.

</div>

<button type=”button” class=”btn btn-danger” data-dismiss=”modal”>Dismiss</button>

</div>

Explanation:

– This modal, designed for displaying alert messages, also omits the `fade` class for an instant appearance.

– The immediate display of the modal can be crucial for alert or warning messages where a rapid response is needed.

Adjusting Modals for Dynamic Content Changes

Modals that contain dynamic content need to adjust their size and position based on the content changes. This can be done through JavaScript or CSS, ensuring that the modal remains appropriately sized and positioned on the page.

Example 1: Modal with Content Loaded Dynamically

<!– Trigger Button –>

Load Dynamic Content

</button>

<!– Modal for Dynamic Content –>

<h5 class=”modal-title” id=”dynamicContentModalLabel”>Dynamic Content</h5>

</button>

</div>

Content is loaded here dynamically…

</div>

$(‘#dynamicContentModal’).on(‘show.bs.modal’, function (event) {

var modal = $(this);

// Load content dynamically and adjust modal

modal.find(‘.modal-body’).load(‘path/to/content’);

});

</script>

Explanation:

– The modal is designed to load content dynamically when it is triggered to open.

– The `show.bs.modal` event is used to execute a function that loads content into

the modal’s body. This dynamic loading can alter the height of the modal, which Bootstrap handles automatically.

Example 2: Adjusting Modal Size Based on Content Change

<!– Trigger Button for Modal –>

Open Modal and Change Content

</button>

<!– Modal with Adjustable Content –>

<h5 class=”modal-title” id=”contentChangeModalLabel”>Adjustable Content Modal</h5>

</button>

</div>

Click <a href=”#” onclick=”changeModalContent()”>here</a> to change content.

</div>

function changeModalContent() {

var modalBody = document.getElementById(‘contentChangeModal’).querySelector(‘.modal-body’);

modalBody.innerHTML = ‘The content has been changed, causing a change in modal size.’;

}

</script>

Explanation:

– In this modal, a link inside the modal body allows the user to change the content.

– When the link is clicked, the `changeModalContent` function updates the innerHTML of the modal body, which can cause a change in the modal’s size. Bootstrap’s modal component automatically adjusts to the new content size.

In both examples, the ability to adapt to dynamic content changes ensures that the modal remains functional and visually consistent, regardless of how its content might vary. This is essential for maintaining a seamless user experience, especially in applications where content is frequently updated or changed based on user interactions.

Choosing Modal Sizes: From Small to Large

Bootstrap modals come in various sizes, allowing them to be versatile for different types of content and interactions. From small alert dialogs to large informational modals, choosing the right size is key to making your modal effective and user-friendly.

Example 1: Small Modal for Quick Alerts or Decisions

<!– Trigger Button for Small Modal –>

Launch Small Modal

</button>

<!– Small Modal –>

<h5 class=”modal-title” id=”smallModalLabel”>Small Modal</h5>

</button>

</div>

This is a small modal suitable for quick alerts or decisions.

</div>

Explanation:

– The `modal-sm` class on the `modal-dialog` div specifies that the modal should be small in size, making it suitable for brief messages or confirmations.

Example 2: Large Modal for Detailed Information

<!– Trigger Button for Large Modal –>

Launch Large Modal

</button>

<!– Large Modal –>

<h5 class=”modal-title” id=”largeModalLabel”>Large Modal</h5>

</button>

</div>

This large modal can be used to display detailed information, such as forms or extensive text.

</div>

Explanation:

– Using the `modal-lg` class, the modal is made larger, which is ideal for displaying more complex or detailed content like forms, lengthy text, or large images.

Showcasing Various Modal Sizes

Demonstrating the impact of different modal sizes helps in choosing the right modal for the right context. Bootstrap provides default sizes, but you can also customize the width using additional CSS if needed.

Example 1: Medium (Default) Modal for Standard Use

<!– Trigger Button for Medium Modal –>

Launch Medium Modal

</button>

<!– Medium Modal –>

<!– Modal content –>

</div>

Explanation:

– The medium modal, or the default size, is suitable for a wide range of purposes. It’s the standard choice when neither a small nor a large modal is necessary.

Example 2: Custom-Sized Modal

<!– Trigger Button for Custom-Sized Modal –>

Launch Custom-Sized Modal

</button>

<!– Custom-Sized Modal –>

<!– Modal content –>

</div>

Explanation:

– In this example, inline CSS (`style=”max-width: 900px;”`) is used to create a modal of a custom width. This allows for greater control over the modal size to fit specific content or design requirements.

Implementing Fullscreen Modals for Maximum Impact

Fullscreen modals

provide an immersive experience, making them suitable for presenting large amounts of information, complex forms, or interactive content. Bootstrap includes classes for creating fullscreen modals that cover the entire viewport.

Example 1: Fullscreen Modal on All Viewports

<!– Trigger Button for Fullscreen Modal on Smaller Viewports –>

Open Responsive Fullscreen Modal

</button>

<!– Responsive Fullscreen Modal –>

<!– Modal content –>

</div>

Explanation:

– Using the `modal-fullscreen-sm-down` class, the modal becomes fullscreen only on small viewports (e.g., mobile devices), while on larger screens, it retains its default size. This approach is ideal for responsive design, ensuring that the modal adapts to different screen sizes effectively.

In each of these examples, the size of the modal is adapted to suit different content and user interaction needs. Choosing the right size enhances the effectiveness of the modal and ensures a better user experience.

YouTube Reference :

1) Modal to Bootstrap in Hindi/Urdu Part-1
2) Modal to Bootstrap in Hindi/Urdu Part-2

BS Grid Basic

BS Typography

BS Tables

BS Images

BS Jumbotron

BS Alerts

BS Forms

BS Floating Labels

BS Form Validation

BS Buttons

BS Button Groups

BS Badges

BS Progress Bars

BS Spinnier

BS Pagination

BS List Groups

BS Cards

BS Dropdowns

BS Collapse

BS Navs

BS Navbar

BS Carousel

BS Modal

BS Tooltip

BS Panels

BS Popover

BS Toast

BS Scrollspy

BS OffCanvas

BS Utilities

BS Flex

Modal

Key Elements of a Modal

Implementing a Standard Modal

Example 1: Basic Bootstrap Modal

Example 2: Modal with Form

Non-Dismissible Modals with Static Backdrop

Example 1: Modal with Static Backdrop

Example 2: Non-Dismissible Modal without Close Button

Social Media

Contact Us

Services

COMPANY