Development

Making Bootstrap modals wider

Bootstrap modals come in 4 sizes, You have the default, small, large and extra-large. The default size is closer to small and often at times in usage feels very restricted in its width. Considering the whole page can be used for content yet the modal pops up and uses less than 25% of the width.

This minimal sized, pop up content feels natural to be smaller than the page. That’s the distraction however occasionally more than some words and buttons need to be in a modal.

4 sizes

The small modal has a max-width of 300px, default is 500px, large is 800px and extra-large has a max-width of 1140px.

Using the default Bootstrap classes to achieve a wider modal rather than just setting the max-width in CSS means that it will be responsive at different frame sizes.

Usage

Use modal-lg beside modal-dialog for a wider modal, modal-xl for a really wide modal or modal-sm for a smaller modal.

Example:

<div class="modal-dialog modal-lg">

Or a working example at CodePen.

 

 

Share

Recent Posts

Kennington reservoir drained drone images

A drained and empty Kennington reservoir images from a drone in early July 2024. The…

1 year ago

Merrimu Reservoir drone images

Merrimu Reservoir from drone. Click images to view larger.

1 year ago

FTP getting array of file details such as size using PHP

Using FTP and PHP to get an array of file details such as size and…

2 years ago

Creating Laravel form requests

Creating and using Laravel form requests to create cleaner code, separation and reusability for your…

2 years ago

Improving the default Laravel login and register views

Improving the default Laravel login and register views in such a simple manner but making…

2 years ago

Laravel validation for checking if value exists in the database

Laravel validation for checking if a field value exists in the database. The validation rule…

2 years ago