Bootstrap 3 için pop-up (modal) kulllanımı konusunda Nisan ayında bir yazı paylaşmıştım bkz: Bootstrap ve Modal Popup Kullanımı Hazır Kodları. Bu kodlar Bootstrap 4 sürümünde de çalışıyor ancak artık Bootstrap boyutlandırması konusunda yazacağınız birçok css kodu işe yaramayacağı için size daha pratik bir çözüm göstermek istedim.
Problem, Bootstrap 4'te örneğin sayfa açılışında modal içinde (bkz: Sayfa açılışında Bootstrap popup nasıl yapılır?) bir görsel ile duyuru paylaşmak istiyorsunuz ve görseldeki yazıların okunabilmesi için de ekranı mümkün olduğunda kaplayacak büyük bir görsel hazırladınız. Bootstrap 4'te modal küçük olarak açıldığı için de görseli bir türlü büyütemiyorsunuz. Bunun için Bootstrap ekibi modal'lar için hazır css sınıfları belirlemişler.
Bootstrap 4'te modal pencere boyutunu büyütmek için;
<div class="modal-dialog">
kodunun olduğu yere gelin ve bu class'a pop-up'ınızın istediğiniz boyutuna göre aşağıdaki css sınıflarından uygun olanı ekleyin:
modal-xl, modal-lg
Örneğin şu kodlar probleminizi çözecektir:
<div class="modal-dialog modal-lg">
Böylece hiçbir css kodu yazmanıza gerek kalmadan hazır css sınıfları ile modal'ınızın boyutunu büyütebilisiniz.