css - How to a make a Bootstrap button full width? -
this have right now. can't become 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
Post a Comment