Belajar Bootstrap: Memperlebar Width Bootstrap Modal Dialog

Bagi yang telah mengenal Bootstrap dan menggunakan salah satu component nya, yaitu Bootstrap Modal akan suatu saat menemui kasus dimana lebar Bootstrap Modal terlalu sempit.

Bootstrap Modal Dialog secara default width diatur pada angka 50% di tengah. Nah, jika kamu membutuhkan lebar yang lebih, silakan atur saja via CSS.

Contoh dialog modal:

[sourcecode language=”html”]
<div class="modal hide fade modal-admin" id="testModal" style="display: none;">
<div class="modal-header">
<a data-dismiss="modal" class="close">×</a>
<h3 id=’dialog-heading’></h3>
</div>
<div class="modal-body">
<div id="dialog-data"></div>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn" >Close</a>
<a class="btn btn-primary" id="btnSaveChanges">Save changes</a></div>
</div>
[/sourcecode]

Tambahkan pada style CSS kamu:

[sourcecode language=”css”]
.modal-admin {
/* new custom width */
width: 75%;
}
[/sourcecode]

Selamat mencoba!