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

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

Answer 2

I believe if you use the developer console (depending on which browser you are using), you will find that directly styling the ".modal" class doesn't affect the modals as the main styling can be found in the classes applied to the modal's sub elements. (e.g .modal-dialog, .modal-content). In your case, what you should do is:

.modal-content{
    border-radius: 0;
    background-clip: border-box;
    min-height: 400px;
        min-width: 400px;
}

Answer 3

I tried all the answers given by other users. None of them worked for me. I found a way on my own, many will say it's not a correct method but it is working for me.

I just called a javascript function where I am setting style for .modal

function changeCSS(){

setTimeout(function(){

    var allModals = document.getElementsByClassName('modal');
        for (var i = 0; i < allModals.length; i++) {

            console.log(allModals[i]);
            allModals[i].style.width="60%";
        }
    },1500);
}

If anyone finds a better way to do this please answer this question I'll surely try it and assign you the bounty if it works.

Answer 4

            <div id="addtaskmodal" class="modal hide fade" tabindex="-1" role="dialog" style="width:80%;left:30%;right:30%;top:5%;bottom:5%; position:fixed; overflow:hidden;" >
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>New Task</h3>
              </div>
              <div class="modal-body" style="max-height:500px;" >
                <p>My modal content here…</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-success" id="startnow" onClick="createNewTask('start')" >Start
                now</button>
                <button type="button" class="btn btn-success"  onclick="createNewTask('')" >Save</button>
                <button class="btn" data-dismiss="modal">Close</button>
              </div>
            </div>
            <div id="addclientmodal" class="modal hide fade" tabindex="-1" role="dialog" >
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>New Task</h3>
              </div>
              <div class="modal-body" style="max-height:500px;" >
                <p>My modal content here…</p>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-success"  onclick="saveNewClient()" >Save</button>
                <button class="btn" data-dismiss="modal">Close</button>
              </div>
            </div>

here i have two modal windows ,load the contents dynamically by ajax,i had inline style for modal popup , also you can add css style by referring the #id

Answer 5

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 6

You can see here that you can give an id for each and every modal you are making. Here is an example:

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#green-modal">
  Launch demo modal
</button>

<div class="modal fade" id="green-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Modal #2

 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#red-modal">
  Launch demo modal
</button>

<div class="modal fade" id="red-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Now you can easily target your css using thos id's. E.g.

#green-modal { background-color: #00FF00; }
#red-modal { background-color: #FF0000; }

Hope it helps.

Answer 7

In Bootstrap, modals will automatically change size depending on the size of the content within them. If that's all you need, BS does it for you...

If you want to style each modal independently, you want to use an id tag in addition to the class modal tags. You can reference this id in your CSS with a #.

e.g.

#modalblue {
  background-color:blue;
}
#modalgreen {
  background-color:green;
}

and the corresponding markup is

<div class="modal" some-other-attributes id="modalblue">
  ...modal content
</div>
<div class="modal" some-other-attributes id="modalgreen">
  ...modal content
</div>