Aditya Ponkshe Aditya Ponkshe - 1 year ago 66
CSS Question

Is it possible to customize style of bootstrap $modal

In my application I am using bootstrap

popup two different times. content of both pop-ups is different hence size of both pop-up must be also different. I tried to style

.modal {
display: block;
position: absolute;
left: 60%;
height: 88%;
width: 28%;
border-radius: 0px;

but as expected it is changing style of both of my pop-ups. Is there any way to apply different class to each popup?

Thanks in advance.

Answer Source

If you have access to HTML, Then you can add an extra class to the modal like <div class="modal custom"> then you can style it like .modal.custom. Full example below

Working Demo


<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
  Variable Modal

<!-- Modal -->
<div class="modal custom fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">


.modal.custom .modal-dialog {
    margin:0 auto;
    /*add what you want here*/

Let me know if you have further issues in the comments.