Sunil Prabakar Sunil Prabakar - 2 years ago 66
HTML Question

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

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

with its children. I have dynamically set 100% width to the
. But while setting the width to 100% using jQuery's width method, the inline style of corresponding
element automatically changed to 102%. This issue happens only while I am enabling border for the particular
. Can you suggest to me how to overcome this issue? I will post my HTML code and jQuery method to set width.


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

jQuery to change width dynamically


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
has the border.

Answer Source

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.


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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download