While adding bootstrap css file, div width automatically increased by 2 percent

Question

I have added bootstrap.min.css file (v3.3.5) for enabling bootstrap layout in some pages. But in one of the pages I didn't use any bootstrap layout; I simply used one div with its children. I have dynamically set 100% width to the div . But while setting the width to 100% using jQuery's width method, the inline style of corresponding div element automatically changed to 102%. This issue happens only while I am enabling border for the particular div . Can you suggest to me how to overcome this issue? I will post my HTML code and jQuery method to set width.

HTML

 <div id="parent" style="height:200px; border:1px solid black"> 
..............................
 </div>

jQuery to change width dynamically

$("#parent").width('100%');

Restult Div

<div id="parent" style="height: 200px; border: 1px solid black; width: 102%;"> 

Note: This issue only occurs while the bootstrap.min.css file has been added and also when the particular div has the border.

Answer 1

This issue happens only while i am enabling border for the particular div.

You need the following in your CSS:

*, :before, :after {
    box-sizing: border-box;
}

Box-sizing, MDN:

border-box: The width and height properties include the padding and border, but not the margin.

VS.

content-box: This is the initial and default value as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.