Aditya Ponkshe Aditya Ponkshe - 11 months ago 52
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.


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.