Search code examples
htmlcsstwitter-bootstrapgoogle-chromebyte-order-mark

Twitter bootstrap generated empty space

For some reason on just one of my pages I get an empty space that I believe is generated by the bootstrap's library.

I am including the page into a section <section class="container col-md-8"> from another page, and the empty line shows up at the start of the section. On the F12 inspector it is seen as " " and when I select to edit it as HTML, a small red dot appears. What might be the reason for it ? And it is generated only on this page, every other included page in the section is fine.

Here are some screenshots:

first screenshot

second screenshot

Solution

  • Answer from @Holt was provided in a comment (posting as an answer so you can accept it to close the question!)

    Your file is encoded in UTF-8 with BOM, change the encoding to UTF-8 without BOM

    So it relates to the Byte Order Mark rendering in Chrome, and is a similar issue to:

    Invisible character rendered between Twig includes

    Chrome apparently shows those dots also in cases like zero-width-space characters, such as in the jsfiddle here