Changing the width of Bootstrap popover

css, popover, twitter-bootstrap, twitter-bootstrap-3

Solution

<div class="row" data-toggle="popover" data-trigger="hover" 
                 data-content="My popover content.My popover content.My popover content.My popover content.">
<div class="col-md-6">
    <label for="name">Name:</label>
    <input id="name" class="form-control" type="text" />
</div>
</div>

Basically i put the popover code in the row div, instead of the input div. Solved the problem.

Problem

I am designing a page using Bootstrap 3. I am trying to use a popover with `placement: right` on an input element. The new Bootstrap ensures that if you use `form-control` you basically have a full-width input element. The HTML code looks something like this: ``` <div class="row"> <div class="col-md-6"> <label for="name">Name:</label> <input id="name" class="form-control" type="text" data-toggle="popover" data-trigger="hover" data-content="My popover content.My popover content.My popover content.My popover content." /> </div> </div> ``` The popovers width is too low, in my opinion because their isn't any width left in the div. I want the input form on the left side, and a wide popover on the right side. Mostly, I'm looking for a solution where I don't have to override Bootstrap. The attached JsFiddle. The second input option. Haven't used jsfiddle a lot so don't know, but try increasing the size of the output box to see results, on smaller screens wouldn't even see it. http://jsfiddle.net/Rqx8T/

Original source