Modal

By default, the modal will have a width of 600px when the screen size is larger than 768px. You can add a column class such as col-md-6 to the div with modal-dialog to give your modal variable size based on screen size per bootstrap grid definitions.

Base Modal

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog col-md-6" role="document">
    <div class="modal-content">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-header">
        <h1 id="myModalLabel">This is the widest modal</h1>
      </div>
      <div class="modal-body">
        Spicy jalapeno bacon ipsum dolor amet pig swine cow, venison tri-tip bresaola pork andouille pastrami
        landjaeger meatball jerky flank beef. Filet mignon brisket shank, pastrami picanha sausage boudin.
        Chicken porchetta sausage landjaeger flank. Meatball ham hock kevin shank, alcatra doner leberkas bacon
        pastrami bresaola pork loin.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-transparent" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Action Button</button>
      </div>
    </div>
  </div>
</div>

Modal with gray body

To make a modal body/footer gray, add modal-gray to the top level modal class.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalGray">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade modal-gray" id="myModalGray" tabindex="-1" role="dialog" aria-labelledby="myModalLabelGray">
  <div class="modal-dialog col-md-6" role="document">
    <div class="modal-content">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <div class="modal-header">
        <h1 id="myModalLabelGray">This is the widest modal</h1>
      </div>
      <div class="modal-body">
        Spicy jalapeno bacon ipsum dolor amet pig swine cow, venison tri-tip bresaola pork andouille pastrami
        landjaeger meatball jerky flank beef. Filet mignon brisket shank, pastrami picanha sausage boudin.
        Chicken porchetta sausage landjaeger flank. Meatball ham hock kevin shank, alcatra doner leberkas bacon
        pastrami bresaola pork loin.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-transparent" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Action Button</button>
      </div>
    </div>
  </div>
</div>