Resize dropdown menu in Bootstrap

Question

I'm using Bootstrap 3.2 as well as this material design plugin. I added a dropdown to a navbar. Within the list item of this dropdown-menu, I have a custom "layout". Something like this:

<li class="list-group-item">

    <div class="row-picture">
        <img class="circle" src="" alt="icon"></img>
    </div>
    <div class="row-content">
        <h4 class="list-group-item-heading">Placeholder</h4>
        <p class="list-group-item-text">Placeholder</p>
    </div>

</li>

The problem is that when I click the dropdown button, the dropdown menu cuts off the text. I've tried a few different ways of editing the css to change the width following answers like this one and this one. However, none seems to fix my problem. How can I set a custom width to a dropdown menu, so, it doesn't clip my text?

Edit: Here's some relevant code:

Answer 1

Bootstrap is a great library but it does things in a very rigid way with things like dropdowns and modal windows. I find myself having to work around it sometimes when what I want to do falls outside the paradigm they are working with. One way to do what you want is to make your css as specific as possible so that you can override the bootstrap css selector.

for example instead of just

.dropdown .list-group-item{}

try

html body ... [drilling into elements] ... div.dropdown div.list-group-item {}

Another thing I do a lot with Bootstrap is use the !important; flag on the css rule that is being picky.

.dropdown .list-group-item{ width: 400px!important; }

In many cases I have to do both.