Bootstrap 3

You can create or just override default bootstrap modal-lgby doing below:

.modal-lg {
    max-width: 80%;
}

If not working just add !important so it would look like below

.modal-lg {
    max-width: 80% !important;
}

Now call the modal-lg.

<div class="modal-dialog modal-lg" role="document">
 <!-- some modal content --->
</div

For Bootstrap 4 refer to @kitsu.eb answer. Also note that using bootstrap 4 utilities might break the responsiveness.

Always have handy the un-minified CSS for bootstrap so you can see what styles they have on their components, then create a CSS file AFTER it, if you don't use LESS and over-write their mixins or whatever

This is the default modal css for 768px and up:

@media (min-width: 768px) {
  .modal-dialog {
    width: 600px;
    margin: 30px auto;
  }
  ...
}

They have a class modal-lg for larger widths

@media (min-width: 992px) {
  .modal-lg {
    width: 900px;
  }
}

If you need something twice the 600px size, and something fluid, do something like this in your CSS after the Bootstrap css and assign that class to the modal-dialog.

@media (min-width: 768px) {
  .modal-xl {
    width: 90%;
   max-width:1200px;
  }
}

HTML

<div class="modal-dialog modal-xl">

Demo: http://jsbin.com/yefas/1

In your code, for the modal-dialog div, add another class, modal-lg:

<div class="modal-dialog modal-lg">

Or if you wanna centre your modal dialog, use:

.modal-ku {
  width: 750px;
  margin: auto;
}