Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JS Bin</title>
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-4 col-xs-offset-4">
        <p style="text-align: center;"><a href="#" data-toggle="modal" data-target="#myModal">Click to open the modal.</a></p>
      </div>
    </div>
  </div>
    
  <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        
        <div class="row">
          <div class="col-sm-2">
            <h4 class="modal-title"><span class="label label-success">Label</span></h4>
          </div>
          <div class="col-sm-9">
            <h4 class="modal-title">THIS_IS_A_REALLY_LONG_PIECE_OF_TEXT_THAT_JUST_WILL_NOT_WRAP_UNLESS_YOU_FORCE_IT_TO</h4>
          </div>
          <div class="col-sm-1 hidden-xs">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
        </div>      
      </div>
      <div class="modal-body">
        <p>There's some other, non-problematic text here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
  
</body>
</html>
 
.modal-header
{
  word-break: break-all;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
martinpolleypro
0viewers