Bootstrap popover is too narrow

Question

http://jsfiddle.net/0y8oy7gf/2/

I have a Bootstrap 3 form in which I have a popover that is placed at the right of the first text input. The popover is triggered on focus of that input, and the trigger is working correctly. My problem is that I'd like for the popover to be wider so that I can have longer lines of text, but it seems to be contained within the parent .col-xs-6 . Is there any way to have it be contained by .container-fluid instead, so that it can occupy the empty space on the right?

HTML is below, and the above jsfiddle demonstrates the problem. Thanks!

  <div class="container-fluid"> 
   <div class="row">
     <div class="col-12">
      <div class="row">
        <div class="col-xs-6 col-xs-offset-3 panel panel-gray floating"> 
          <div class="panel-body">
            <form action="?" method="POST" id="foo">
              <div class="form-group">
                <h3>Set your new password</h2>
              </div>
              <div class="form-group form-group-lg">
                <label for="new-password">New password</label>
                <input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
              </div>
              <div class="form-group form-group-lg">
                <label for="confirm-new-password">Confirm new password</label>
                <input type="password" class="form-control" id="confirm-new-password">
              </div>
              <div class="form-group form-group-lg">
                <label for="security-answer">Answer your security question:</label>
                <p id="security-question">How many cups of sugar does it take to get to the moon?</p>
                <input type="text" class="form-control" id="security-answer">
              </div>
              <div class="btn-group-lg">
                <input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
              </div>
            </form>
            <br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

You simply need to set the data-container attribute to tell the popover which element to use as it's containing element (see the documentation ):

  <div class="container-fluid"> 
   <div class="row">
     <div class="col-12">
      <div class="row">
        <div class="col-xs-6 col-xs-offset-3 panel panel-gray floating"> 
          <div class="panel-body">
            <form action="?" method="POST" id="foo">
              <div class="form-group">
                <h3>Set your new password</h2>
              </div>
              <div class="form-group form-group-lg">
                <label for="new-password">New password</label>
                <input type="password" class="form-control" id="new-password" autofocus data-toggle="popover" data-container=".container-fluid" data-content="8-20 characters long" data-trigger="focus" data-placement="right" viewport="container">
              </div>
              <div class="form-group form-group-lg">
                <label for="confirm-new-password">Confirm new password</label>
                <input type="password" class="form-control" id="confirm-new-password">
              </div>
              <div class="form-group form-group-lg">
                <label for="security-answer">Answer your security question:</label>
                <p id="security-question">How many cups of sugar does it take to get to the moon?</p>
                <input type="text" class="form-control" id="security-answer">
              </div>
              <div class="btn-group-lg">
                <input type="submit" value="Change password" class="btn btn-primary btn-block" id="btn_changePassword">
              </div>
            </form>
            <br>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

http://jsfiddle.net/0y8oy7gf/3/