Changing the width of Bootstrap popover

by

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/

24 Answers
24

Leave a Comment