Bootstrap Customizing Modal Size And Content Complete Guide

Last Update:2025-06-22T00:00:00 .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 6 mins read Difficulty-Level: beginner

Understanding the Core Concepts of Bootstrap Customizing Modal Size and Content

Bootstrap Customizing Modal Size and Content

Bootstrap modals come with default sizes, but often it's necessary to adjust these to better fit your specific content requirements. Customizing modal sizes and content can greatly enhance the user experience by ensuring that the modal fits well within your design and provides the appropriate amount of information.

1. Understanding Bootstrap Modals

Before we dive into customization, let’s first understand how Bootstrap modals work. A basic modal in Bootstrap consists of a container div with .modal and .fade classes, an inner wrapper div with .modal-dialog, and finally, the content zone inside .modal-content. Within .modal-content, you typically have .modal-header, .modal-body, and .modal-footer sections.

2. Custom Modals with Sizing

Bootstrap 4 introduces classes to size modals more easily. Here are the options:

Default (large): This is the default size when no additional sizing class is specified.
Small: .modal-sm class can be added to .modal-dialog to shrink the modal size.
Large: .modal-lg class for a larger modal.
Extra Large: .modal-xl class for an extra large modal (require Bootstrap 4.2 upwards).

Example of Small Modal Size:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Launch small modal
</button>

<!-- The Modal -->
<div class="modal fade" id="myModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Small Modal</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      
      <!-- Modal body -->
      <div class="modal-body">
        Content for a small modal.
      </div>
      
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
      
    </div>
  </div>
</div>

3. Custom Modals with Content

If you need to customize the content, you can structure it however you want within the .modal-body div. Remember to respect the modal's built-in structure for header and footer or recreate them if needed from scratch.

To add images, forms, video or any other media type, simply place them inside the .modal-body.

Example of Modal with Custom Content:

<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myCustomModal">
  Launch modal with custom content
</button>

<!-- The Modal -->
<div class="modal fade" id="myCustomModal">
  <div class="modal-dialog">
    <div class="modal-content">
      
      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Custom Modal</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body">
        <h5>Here is some custom content:</h5>
        <p>A picture:</p> 
        <img src="image.jpg" alt="An image" class="img-fluid">
        <p>A form:</p>
        <form>
          <div class="form-group">
            <label for="email">Email address:</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="form-group">
            <label for="pwd">Password:</label>
            <input type="password" class="form-control" id="pwd">
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
      
      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
      
    </div>
  </div>
</div>

4. Advanced Customization via CSS

For more advanced sizing that goes beyond the predefined classes, you can use custom CSS to adjust height, width, padding, and other properties.

Example of Custom CSS:

/* Target a specific modal via ID */
#customSizeModal .modal-dialog {
  max-width: 800px; /* Default value is 500px */
  margin: 30px auto; /* Center it horizontally */
}

5. Responsive Design

Modals should be responsive to ensure they work well on various screen sizes. Bootstrap handles most of this automatically, but be mindful of the custom styles you apply that might affect responsiveness.

By using the default classes, customizing through CSS, and ensuring a responsive layout, you can create modals that enhance your application’s functionality and user interface.

Summary

Customizing modal sizes and content in Bootstrap involves:

Using predefined size classes like .modal-sm, .modal-lg, and .modal-xl.
Customizing content by adding any HTML needed within the .modal-body.
Applying custom CSS for advanced styling.
Ensuring responsiveness for different screen sizes.

Online Code run

🔔 Note: Select your programming language to check or run code at

💻 Run Code Compiler

Step-by-Step Guide: How to Implement Bootstrap Customizing Modal Size and Content

Step 1: Set Up Your HTML Structure

First, you need to set up a basic HTML structure including Bootstrap’s necessary CSS and JS. You can use a CDN for simplicity.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customize Bootstrap Modal</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <style>
        /* Custom CSS for modal size goes here */
    </style>
</head>
<body>

<!-- Button to open modal -->
<button type="button" class="btn btn-primary mt-5" data-toggle="modal" data-target="#exampleModal">
    Open Custom Modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Custom Modal Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Custom content goes here -->
                <p>This is a custom-sized modal with custom content. You can add images, forms, text, or any HTML content here.</p>
                <img src="https://via.placeholder.com/300" alt="Placeholder image" class="img-fluid">
            </div>
            <div class="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>
        </div>
    </div>
</div>

<!-- Bootstrap JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Step 2: Customize the Modal Size

Bootstrap comes with several built-in modal sizes that you can use by adding a class to the .modal-dialog. For instance, to make a modal smaller, you would use modal-sm. For a larger one, you would use modal-lg, and for the largest size, you would use modal-xl.

In the above example, a large modal is used (modal-lg). If you want a small modal, simply change the class to modal-sm.

Step 3: Customize the Modal Content

You can add any HTML content inside the .modal-body div. This can include images, text, forms, lists, or even other components. Here's an example of adding a form inside a modal:

<div class="modal-body">
    <h4>Contact Us</h4>
    <form>
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" class="form-control" id="name" placeholder="Enter your name">
        </div>
        <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" id="email" placeholder="Enter your email">
        </div>
        <div class="form-group">
            <label for="message">Message</label>
            <textarea class="form-control" id="message" rows="3" placeholder="Enter your message"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

Step 4: Add Custom Styles (Optional)

If you want to apply unique styles to your modal, you can use custom CSS. For example, to change the background color and the text color, add this block inside the <style> tag in the <head> section:

Top 10 Interview Questions & Answers on Bootstrap Customizing Modal Size and Content

Top 10 Questions and Answers on Bootstrap Customizing Modal Size and Content

1. How can I change the default size of a Bootstrap modal?

<!-- Adding a custom class 'modal-lg' or 'modal-sm' for larger or smaller sizes -->
<div class="modal fade" id="customSizeModal" tabindex="-1" role="dialog" aria-labelledby="customSizeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document"> <!-- 'modal-lg' for a large modal -->
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="customSizeModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Content here
      </div>
      <div class="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>
    </div>
  </div>
</div>

2. Can I have multiple modals of different sizes on the same page?

Answer: Absolutely, you can have multiple modals with different sizes on the same page. Just ensure each modal has a unique id and you target the correct one in your JavaScript or by using the HTML data-target attribute:

<!-- Small Modal -->
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="smallModalLabel">Small Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Small content here...
      </div>
    </div>
  </div>
</div>

<!-- Large Modal -->
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="largeModalLabel">Large Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Large content here...
      </div>
    </div>
  </div>
</div>

3. How do I change the default modal content dynamically via JavaScript?

Answer: You can change the content of a Bootstrap modal programmatically using JavaScript. Use jQuery or vanilla JavaScript to modify the DOM elements:

// Using jQuery
$('#myDynamicModal .modal-body').html('New content here...');

// Using vanilla JavaScript
document.querySelector('#myDynamicModal .modal-body').innerHTML = 'New content here...';

4. Can I make the modal full screen on smaller devices?

Answer: Yes, you can make the modal full screen on smaller devices using media queries in your CSS. Here’s an example:

/* Custom CSS for full screen modal on smaller devices */
@media (max-width: 576px) {
  .modal-dialog {
    width: 100%;
    margin: 0;
  }
}

5. How can I vertically center a Bootstrap modal?

Answer: To vertically center a Bootstrap modal, you need to ensure that the modal dialog is displayed in the middle of the viewport. Here’s a simple solution using Flexbox:

/* Custom CSS to vertically center modal */
.modal-dialog {
  display: flex;
  align-items: center;
  min-height: calc(100% - 1rem);
}

6. Can the modal body size be dynamic based on the content?

Answer: Yes, the modal body size will automatically adjust based on the content. If the content is larger, the modal will grow to accommodate it, and you may even see a scroll bar if needed. To control this behavior, you can use the .modal-body class to set maximum height or overflow attributes:

/* Custom CSS to limit modal body height and enable scroll */
.modal-body {
  max-height: calc(100vh - 210px);
  overflow-y: auto;
}

7. How do I change the background color of the modal content box?

Answer: You can change the background color of the modal content box by adding a custom CSS class or directly modifying the .modal-content class:

/* Custom CSS to change background color of modal */
.custom-modal .modal-content {
  background-color: #f8f9fa;
}

8. Can I make the modal header and footer disappear?

Answer: Yes, you can make the modal header and footer disappear by simply omitting those sections in your HTML. However, if you are dynamically changing the content, you can use JavaScript to remove these sections:

// Using jQuery
$('#myModal .modal-header, #myModal .modal-footer').remove();

// Using vanilla JavaScript
let modalHeader = document.querySelector('#myModal .modal-header');
let modalFooter = document.querySelector('#myModal .modal-footer');
if (modalHeader) modalHeader.remove();
if (modalFooter) modalFooter.remove();

9. How can I add custom buttons or controls in the modal header?

Answer: You can add custom buttons or controls inside the modal header by adding HTML elements:

<div class="modal-header">
  <h5 class="modal-title">Custom Buttons Modal</h5>
  <button type="button" class="btn btn-info">Info</button>
  <button type="button" class="btn btn-success">Submit</button>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

10. Is there a way to prevent closing the modal when clicking outside or pressing the ESC key?

Answer: Yes, Bootstrap provides options to prevent closing the modal when clicking outside or pressing the ESC key. You can set the data-backdrop attribute to static and the data-keyboard attribute to false:

Bootstrap Customizing Modal Size And Content Complete Guide