Is it possible to customize style of bootstrap $modal

Question

In my application I am using bootstrap $modal 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 using

.modal {
    display: block;
    position: absolute;
    left: 60%;
    height: 88%;
    width: 28%;
    overflow-y:auto;
    overflow-x:auto;
    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 1

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

HTML

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

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

CSS

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

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

Answer 2

Update 2017 - Bootstrap 4

The structure of the modal has changed since Bootstrap 3, so now different CSS is required to customize the position, size or modal styles. To change the modal width, set the max-width on the modal-dialog, for exmaple:

.modal.custom .modal-dialog {
    max-width: 50%;
}

Custom modal demo