Bootstrap Tutorial

Bootstrap Fixed Navbar | Sticky Top | Sticky Header Bootstrap CDN 5.3, 5.2, 4.6, 4.3, 3.4, 3.3 (New Links) | Bootstrap CDN 5, 4, 3 File Download Bootstrap 5 Modal Disable Outside Click Bootstrap Horizontal and Vertical Divider Bootstrap Modal Pass data Dynamically Bootstrap Confirm Delete Modal | Popup Bootstrap Add Space Between Rows | Margin Bootstrap Remove Modal Background Bootstrap Make Table Row Clickable Bootstrap Change modal background color Bootstrap Center Align Form Bootstrap Show Image in Modal | Popup Bootstrap Button Icon with Text Bootstrap Scrollable Modal Bootstrap Image Center Align Bootstrap Dropdown with Icon Bootstrap Get Checkbox checked value Bootstrap Uncheck radio Button Bootstrap Set Radio button default checked or selected Bootstrap Radio Button Validation Bootstrap Enable Disable Radio Button Bootstrap Radio Button Checked Event Bootstrap get radio button checked or selected value Bootstrap Disable Enable Button on Click Bootstrap Tooltip on Input Field Elements Bootstrap Fixed Footer Bootstrap Image Upload | file Upload Bootstrap Modal on page load Bootstrap Login Form Template Bootstrap Add Search icon with Search bar Bootstrap button tooltip on hover Bootstrap Icons CDN Latest Version (1.11.3) Bootstrap Tabs Panel Pass dynamic content Bootstrap Change Dropdown Menu Background Color Bootstrap Avoid Dropdown Menu to close menu items on clicking inside Bootstrap Table Remove Border Bootstrap Modal Example Bootstrap Center Align Input Field Bootstrap Change Icon Color Bootstrap Text Align Center | Middle Bootstrap Remove all Rounded Corners Bootstrap Alerts Example Bootstrap Alert with Icons Bootstrap Scroll to Top Button Bootstrap Button Loading Spinner Bootstrap Check if Modal is Shown or Hidden Bootstrap Dropdown Button Change Text on Selection Bootstrap Remove offcanvas Backdrop Bootstrap Textarea Height Auto Resize Bootstrap selectpicker Get Selected Value Glyph Trash Icon

Bootstrap Modal Example

Bootstrap Modal Example: Bootstrap Modal provides various size options, enabling flexible content presentation. 'Fullscreen' expands the modal to cover the entire viewport, ideal for immersive experiences. 'Small' and 'Large' options allow tailored sizes for content, ensuring a snug fit. 'Extra Large' is suitable for extensive content, preventing overcrowding. These size classes enhance user experience by accommodating diverse content needs within a sleek, responsive interface, a hallmark of Bootstrap's utility in web development.

written

reviewed

updated

How can I create a fullscreen modal using Bootstrap?

The "modal-fullscreen" class in Bootstrap is used to make a modal dialog occupy the entire width of the viewport, creating a fullscreen modal. This class sets the modal's width to match the width of the user's screen, ensuring that the modal takes up the entire available horizontal space.

Bootstrap Fullscreen Modal

   <button type="button" class="btn btn-primary" data-bs-toggle="modal" id='open-modal' data-bs-target="#myModal">Open
    Fullscreen Modal</button>
  
  <!-- Modal -->
  <div class="modal fade " id="myModal">
    <div class="modal-dialog modal-fullscreen">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Bootstrap Modal Fullscreen</h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p>modal-fullscreen: This class sets the width of the modal to occupy the full width of the viewport.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>

Run

Output of Bootstrap Fullscreen Modal

What is the syntax for creating a small-sized Bootstrap Modal?

The Bootstrap Modal class "modal-sm" reduces the width of a modal dialog, making it smaller and more compact. This is useful when you want to display concise content or notifications without occupying too much screen space. By applying this class, you can create a small, space-efficient modal window that is particularly handy for displaying quick messages, alerts, or small forms while ensuring a clean and unobtrusive user interface.

Bootstrap Modal Small

 <button type="button" class="btn btn-primary" data-bs-toggle="modal" id='open-modal' data-bs-target="#myModal">Open
      Modal Small</button>

    <!-- Modal -->
    <div class="modal fade " id="myModal">
      <div class="modal-dialog modal-sm">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Bootstrap Modal Small</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>modal-sm:This class sets the width of the modal to a smaller size</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

Run

Output of Bootstrap Modal Small

How can I create a large-sized modal using Bootstrap's modal component?

The Bootstrap class "modal-lg" is used to enlarge the width of a modal dialog box in web development. By applying this class, the modal expands to a larger size, providing more space for content or displaying larger elements. This is particularly useful when you need to showcase extensive information, images, or forms within the modal while maintaining a responsive and user-friendly design

Bootstrap Modal Large Example

    <button type="button" class="btn btn-primary" data-bs-toggle="modal" id='open-modal' data-bs-target="#myModal">Open
      Large Modal</button>

    <!-- Modal -->
    <div class="modal fade " id="myModal">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Bootstrap Modal Large</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>modal-lg:This class sets the width of the modal to a larger size</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

Run

Output of Bootstrap Modal Large

What is the procedure for creating an extra large Bootstrap Modal?

The Bootstrap class "modal-xl" is used to enlarge the width of a modal dialog in web development. By applying this class, the modal becomes extra-large, providing more space for content and improving user experience.

Bootstrap Modal Extra Large Example

<button type="button" class="btn btn-primary" data-bs-toggle="modal" id='open-modal' data-bs-target="#myModal">Open
      Extra Large Modal</button>

    <!-- Modal -->
    <div class="modal fade " id="myModal">
      <div class="modal-dialog modal-xl">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Bootstrap Extra Large Modal</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p>modal-xl: This class sets the width of the modal to an extra-large size.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

Run