How to make these elements work properly with bootstrap?

Question

css

Here is the code how it should work https://codepen.io/mustafich/pen/gvwbNm
And for the fact that the site is bootstrap looks clumsy ( )
How to make these elements work properly with bootstrap?

Answer 1

You need to set the CSS property box-sizing: content-box; because bootstrap sets all elements to the value of the border-box property

Answer 2

see in the inspector how the bootstrap affects the elements and override the css.
Or connect the bootstrap not entirely, but partially, if necessary.

Answer 3

Are you sure it's because of the bootstrap?