Just a small design issue in BS

Ideas
1

Of course it's not a big problem, but it was a bit confusing at first, especially for a newbie like me, when i created my first three columns

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-7"></div>
            <div class="col-md-2"></div>
        </div>
    </div>
</body>

I was wondering, why the third column was displayed with double height, thus, visually standing out of the row without reason (3+7+2=12). Then i found out, that this was because of the line break of the text "Empty Column" in the smallest column.

Wouldn't it be useful to have the font of "Empty Column" a bit smaller, or even better, responsive (!) to the width of the column, in order to ensure equal heights for columns without content, just for a cleaner, more realistic look of the layout?

Thank you, Michael

enter image description here

2

You will soon get used to that and once you add some text yourself you won't notice.

3

Of course i can fill the columns with elements and it's gone. As i said, not a big thing, nevertheless it's a design flaw.

4

Or just wait for Bootstrap 4 to be released. The new flexbox layout makes all cell in a row to be as tall as the one with most content.

Btw, i do hope the BSS will support bootstrap 4 as soon as it exit the alpha phase and not only when it get released. Other developing tools already offer BS4 alpha support, so i hope we will receive a new version soon.

5

Yeah, i'm looking forward to Bootstrap 4! In the meantime it's ok for me to fill the columns with paragraphs and dummy text for layout mockups.

6

Thanks for bringing this problem to our attention! The default text "Empty Column" is a bit of a hack - we basically target all :empty columns and place this text inside them with a :before CSS pseudo element. I think we can tweak the font size a bit for small columns. The only reason why we display this, is to give novice users an idea that there is something on the page when they drop an empty row or column.

We are also looking forward to Bootstrap 4. We can add it to Bootstrap Studio when the first betas are released. But it was a smart choice not to support it so early - every single alpha so far has introduced breaking changes that would have made life difficult for Bootstrap Studio users.

7

@marco:

Other developing tools already offer BS4 alpha support, so i hope we will receive a new version soon.

I'm curious - which other tools do support Bootstrap 4? I'd love to see a list. Need something soon.

Thanks.

8

Robertandrews,

Unless someone is entirely unable to use Bootstrap Studio, it would be extremely tacky for someone to list a bunch of rival apps in here don't you think? Google works great if you're looking for that answer, as I'm sure that the devs of other apps will be sure it's on their websites so it is searchable. Also, as Martin has mentioned, those apps are probably in for (and have already been so) some rude awakenings when Bootstrap 4 is updated during it's Alpha phase. I would highly suggest not using anything as of yet until it's out of Alpha at the very least. If you still choose to do so, just be prepared for a lot of editing of your code to accommodate all the changes that happen in revisions of Bootstrap 4.