CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Rohit Rana
Rohit Rana

Reputation: 43

Can anyone please tell me how 'border-box' property works in bootstrap 3? How should i manage container width?

<div class="container">
     <ul class="list-group">
           <li class="list-group-item">
                 <a href="#">TOUCH ME</a>
                 <div class="list-group-content">
                       <h4 class="list-group-item-heading">STYLISH</h4>
                       <p class="list-group-item-text">
                             <span>ITEM</span>
                             <a href="#">read more</a>
                       </p>
                 </div>
            </li>
      </ul>
</div>

I was not getting what container width should i used here. I took it initially as 960px. But padding-left:15px padding-right:15px adds to the confusion. I was puzzling whether it should be 960 or 990(after 15px padding from both side). I read border-box property is playing a role here. Anyone please help.

Upvotes: 1

Views: 245

Answers (2)

Milan Pandya
Milan Pandya

Reputation: 71

Note: add this code in to remove padding from the the element.

-moz-box-sizing:content-box;
-o-box-sizing:content-box;
-webkit-box-sizing:content-box;
-ms-box-sizing:content-box;

Upvotes: 0

RvDesignStudio
RvDesignStudio

Reputation: 31

I always code like this with bootstrap.

<section class="yourclasshere">
    <div class="container">
         <div class="row">
               <div class="col-md-3">
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut amet quaerat atque nihil nobis similique odio explicabo asperiores ex minus facere laboriosam blanditiis vel sed non officiis nemo ducimus voluptatem.</p>
               </div><!-- .Col-md-3 ends here -->
         </div>
    </div>
</section>

Upvotes: 1

Related Questions