Improving Bootstrap 4 modals on small screens

John Avis by | June 27, 2018 | Bootstrap

Bootstrap modals are great but on small screens they take up more valuable space than necessary.
Bootstrap modals are great but on small screens they take up more valuable space than necessary.

With a few simple CSS tweaks you can maximise the available space and improve the look of modals on small screens.

The first thing to do is to remove the margin around the modal:

@media (max-width: 575px) {
.modal-dialog{margin:0}
}


The media query with maximum width means this change applies just to the XS size.

With the margin gone, the border and rounded corners look weird so they need to be removed too:

@media (max-width: 575px) {
.modal-dialog{margin:0}
.modal-content{border:0;border-radius:0}
}


Now we have a much better looking modal that takes up the full width of the screen (middle screen capture on the attached image).

A further improvement that can be made is to make the modal take up the full height of the screen too:

@media (max-width: 575px) {
.modal-dialog{margin:0;height:100%}
.modal-content{border:0;border-radius:0;min-height:100%}
}


Here’s how these changes look compared to the standard Bootstrap style.

Improving Bootstrap 4 modals on small screens

Related Posts

ASP.NET Web Forms Bootstrap

More on Bootstrap 4 modals in ASP.NET Web Forms applications using UpdatePanels

by John Avis | April 9, 2019

In this, my third post on this topic, I go over the methods I am using now and the problems I have encountered and overcome.


Bootstrap

Sample Bootstrap 4 template for a search orientated two row navbar

by John Avis | January 16, 2019

This sample lends itself to an ecommerce website.


Bootstrap

Free Bootstrap 4 Template with Side Navigation

by John Avis | December 20, 2018

I recently needed a simple Bootstrap 4 template with side-navigation so came up with the following template.

Comments

There are no comments yet. Be the first to leave a comment!

Leave a Comment
Tags
ASP.NET Html Forms ASP.NET MVC ASP.NET Web Forms ASP.NET Web Pages Bootstrap C# Classic ASP Cool Websites Databases eBay and PayPal Electrical Repairs General Hardware HTML/CSS Jquery/Javascript Media Center Mobile Phones Responsive Web Design SEO and Social Networking Web Design Web Development Web Security web+db Website Hosting Windows XP Youtube

About me

...mostly about web development and programming, with a little bit of anything else related to the Internet, computers and technology.

Subscribe

Get the latest posts delivered to your inbox.