Menu
I am unable to change the border radius of bootstrap modal.
.modal{ -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } How should I do it?
310
Modal Size Change the size of the modal by adding the . modal-sm class for small modals, . modal-lg class for large modals, or . modal-xl for extra large modals.
Answer: Set width for . modal-dialog element Similarly, you can override the width property of . modal-sm , . modal-lg and . modal-xl class to resize the small, large and extra-large modal dialog box respectively.
In Bootstrap 3, you need to apply the border radius to the .modal-content div element and not the .modal div element like this:
.modal-content { -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; border-radius: 0px !important; } N.B. Remove the !important tags if your custom css is loaded after your bootstrap css.
In Bootstrap 4 & Bootstrap 5, you can just add the rounded-0 class name to your modal-content element (or to any other element) to set it's border radius to 0 like this:
<div class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content rounded-0"> <!-- Your Modal content here --> </div> </div> </div> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
