title: Bootstrap dropdown adjustment
body: <p>I'm trying to adjust the <code>glyphicon-user icon</code> and <code>btn-primary</code> in dropdown to be displayed properly when the window is resized. However, when I resize the window, my button alignment seems to be out of the window where I can't view the end of the button. Answers anyone?</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
           &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                         &lt;strong&gt;User&lt;/strong&gt;
                      &lt;/a&gt;
                      &lt;ul id="user-dp" class="dropdown-menu"&gt;
                                  &lt;li&gt;
                                      &lt;div class="row"&gt;
                                      &lt;!-- Login --&gt;
                                          &lt;div class="col-lg-4"&gt;
                                          &lt;p class="text-center"&gt;
                                              &lt;span class="glyphicon glyphicon-user icon-size"&gt;&lt;/span&gt;
                                          &lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;div class="col-lg-8"&gt;
                                          &lt;p class="text-left"&gt;&lt;strong&gt;Test&lt;/strong&gt;&lt;/p&gt;
                                          &lt;p class="text-left"&gt;
                                              &lt;a href="#" class="btn btn-primary btn-block btn-sm"&gt;Testing&lt;/a&gt;
                                          &lt;/p&gt;
                                      &lt;/div&gt;
                                          &lt;div class="bottom text-center"&gt;
                                          &lt;a href="#" class="btn btn-danger btn-block"&gt;Test again&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
            &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h1>style.css</h1>
  
  <pre><code>.icon-size
  {
      margin-top:5%;
      font-size: 87px;
  }
  #user-dp{
      min-width: 300px;
      padding: 14px 14px 0;
      overflow:hidden;
      background-color:rgba(255,255,255,.8);
  }
  #user-dp .help-block{
      font-size:12px    
  }
  #user-dp .bottom{
      background-color:rgba(255,255,255,.8);
      border-top:1px solid #ddd;
      clear:both;
      padding:14px;
  }
  </code></pre>