Bootstrap CSS messing with image (border-image)

Question

I did a splicing of image and tried to increase / decrease the width of image based on certain dimensions.

This works perfectly.

When I included this image inside bootstrap, then the image height is overridden by bootstrap and the image appears reduced in height. Try removing bootstrap and run the fiddle. The output will have original image height.

<div class="tireImageFirst" style="height: 12px; width:100px;"><span style="position:relative; top:25px; left:80px; font-size:x-small">14'12''</span></div>

Any pointers on how to fix this would help. Here is link to bootstrap 3 CDN

http://getbootstrap.com/getting-started/

Here is the fiddle

https://jsfiddle.net/haribalaji/3oqsyxrq/

Answer 1

If your css code is overridden by bootstrap you can try to use the value : !important. For example: div{color:red !important;} This will be the dominant color.

Answer 2

Your solution is dependent on the default content-box value of box-sizing . Bootstrap's grid system requires all columns to have box-sizing:border-box , so that columns with a set border do not break the grid, being wider than the rest.

In fact, a lot of elements have the potential to break Bootstrap's grid system if their width was calculated excluding borders, so they simply applied box-sizing:border-box to everything * .

In short,

.tireImageFirst {
    box-sizing: content-box;
}

... will fix your problem. Updated fidlle .