title: How to a make a Bootstrap button full width?
body: <p>This is what I have right now. I can't get it to become full width</p>
  
  <p><a href="http://i.stack.imgur.com/vaXlT.png" rel="noreferrer">Almost full width</a></p>
  
  <p>This is the html. I've already tried adding .btn-block class but I get the same results as if I just used width: 100%; in the css. Maybe the problem is with the parent element?</p>
  
  <pre><code>&lt;article class="col-xs-12 col-md-4"&gt;
              &lt;div class="label label-success price"&gt;&lt;span class="glyphicon glyphicon-tag"&gt;&lt;/span&gt;$39&lt;/div&gt;
  
              &lt;div class="price-title"&gt;
                  &lt;h3&gt;LOREM&lt;/h3&gt;
  
                  &lt;small&gt;Lorem Ipsum&lt;/small&gt;
              &lt;/div&gt;
  
              &lt;div class="price-content "&gt;
                  &lt;ul&gt;
                      &lt;li&gt;&lt;h4&gt;Item or Service # 1&lt;/h4&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h4&gt;Item or Service # 2&lt;/h4&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h4&gt;Item or Service # 3&lt;/h4&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h4&gt;Item or Service # 4&lt;/h4&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h4&gt;Item or Service # 5&lt;/h4&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;h4&gt;Item or Service # 6&lt;/h4&gt;&lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;a href="#"&gt;&lt;div class="btn btn-success"&gt;Sign Up&lt;/div&gt;&lt;/a&gt;
              &lt;/div&gt;
          &lt;/article&gt;
  </code></pre>
  
  <p>And these are the styles</p>
  
  <pre><code>#tables{
  color: white;
  text-align: center;
  margin: 15px 20px;}
  
  
  .price{
  position: relative;
  top: 20px;
  font-size: 30px;}
  
  .price-content{
  background-color: #E8E9EA;
  color: #69696A;
  padding-right: 50px;
  padding-top: 30px;
  height: 350px;
  margin-bottom: 80px;
  width: 100%;}
  
  .btn{
  border-radius: 0px;
  font-size: 20px;
  font-weight: bold;
  width: 100%;}
  </code></pre>