Bootstrap HTML carriage return

Question

After one hour for isolating the problem, I can post this :)

I've a problem with local file but not in production. THe only difference is that on production, html files are inlined.

I'm using default bootstrap 3.3.5 and this css class :

<style>
    .v-center {
        display: inline-block;
        float: none;
    }
</style>

My problem is that I don't have the same result with both code :

Code 1 :

<div class="row">
    <div class="col-md-4 v-center">
        col-md-4
    </div><div class="col-md-8 v-center">
        col-md-8
    </div>
</div>

Code 2 :

<div class="row">
    <div class="col-md-4 v-center">
        col-md-4
    </div>
    <div class="col-md-8 v-center">
        col-md-8
    </div>
</div>

You can found here two examples :

http://relationeo.com/test.html

http://relationeo.com/test2.html

The bug is happening when window with is > 990px.

Why the carriage return breaks the col ?

Thanks

I suggest you to read this post: http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements — service-paradis, Nov 23 '15 at 17:47

score 2 · Accepted Answer · answered Nov 23 '15 at 17:50

The problem is your CSS class "v-center". It sets the display to inline-block. With inline-block white space comes into play (at least the first character of white space, anyways). Just as you would expect:

Just
Testing

To be rendered as Just Testing rather than JustTesting, the same applies to inline or inline-block elements.

Long and short, don't mess with the Bootstrap grid if you expect to have consistent results. If you need to apply other classes, do so within the grid div, not on the same div. For example:

<div class="col-md-8"> <!-- this is grid div, so no other classes here -->
    <div class="v-center">
        ...
    </div>
</div>

Bootstrap HTML carriage return

1 Answers1