Position Modal box in Twitter bootstrap 3

Question

I'm trying to have a Twitter bootstrap 3 modal appear fixed to the top right corner of the body.

So far I've tried:

• position: fixed; right 0px (left and top works but right has no affect)
• translate: can get it working with px values or % but position will not be same when resizing
• Setting the left margin as percentage

CSS in question:

#confirm { 
  position: fixed !important;
  width: 120px !important;
  right: 10px !important;      
//margin-left: 80% !important;
//-webkit-transform: translate(600px, 0px);
}

See the fiddle bellow: http://jsfiddle.net/3kgbG/74/

Answer 1

Twitter Bootstrap applies left: 1%; and right: 1%; to the modal box by default.

First, you need to reset the left property to auto. Then you could add the right property for the element.

#confirm {
  width: 120px;
  position: fixed;
  left: auto; /* <-- Reset the default left value */
  right: 10px;
}

WORKING DEMO.