Tengo 4 columnas con un ancho cada una de 248,5 px en la cual tiene contenido y al agregar un botón con el evento modal, éste sólo se muestra o abre dentro de ese recuedro y no logro que se muestre en el centro de la pantalla, lo mismo sucede en cada uno de esos cuadros.
<div class="owl-item" style="width: 248.5px;">
<div class="item">
<div class="panel panel-default">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-
toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Adjunto imagen de como sale el modal dentro de las columnas, que son 4 cada una mide 248,5 px de ancho y el modal se queda encapsulado dentro de esos recuadros no logro que salga en el medio.