css - How to a make a Bootstrap button full width? -


this have right now. can't become full width

almost full width

this html. i've tried adding .btn-block class same results if used width: 100%; in css. maybe problem parent element?

<article class="col-xs-12 col-md-4">             <div class="label label-success price"><span class="glyphicon glyphicon-tag"></span>$39</div>              <div class="price-title">                 <h3>lorem</h3>                  <small>lorem ipsum</small>             </div>              <div class="price-content ">                 <ul>                     <li><h4>item or service # 1</h4></li>                     <li><h4>item or service # 2</h4></li>                     <li><h4>item or service # 3</h4></li>                     <li><h4>item or service # 4</h4></li>                     <li><h4>item or service # 5</h4></li>                     <li><h4>item or service # 6</h4></li>                 </ul>                  <a href="#"><div class="btn btn-success">sign up</div></a>             </div>         </article> 

and these styles

#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%;} 

well first question... why heck nesting div inside a tag? <a href="#"><div class="btn btn-success">sign up</div></a>. try this:

<a class="btn btn-block btn-success" href="#">sign up</a> 

then remove padding-right: 50px; .price-content selector.


Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -