Bootstrap: Non-floating columns in grid system

[Miqueliu]

Based on an official Bootstrap's example (v3.3.7), there is a trouble:

If we are in a media query and it is not applying a proper class on a column, by default the full width is reached (like a virtual col-*-12 class). However, the problem is that it is not floating as it should be.

Considering a portion of the said particular example:

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

On a extra small (phones) or small (tablets) devices, children divs have no float: left.

[heikojansen]

No Bootstrap expert myself, but I think that´s intentional. As the docs for that example say:

Using a single set of .col-md-* grid classes, you can create a basic grid system that
starts out stacked on mobile devices and tablet devices (the extra small to small
range) before becoming horizontal on desktop (medium) devices.

To get floating column divs on those devices you should use col-xs-* classes, I think.

[ralfting]

According to your question, you want that the child div columns stay side-by-side.

On Bootstrap if you don't specify the column for mobile devices (_col-xs-_) the behaviour is display: block (only mobile and tablet) making a column (.col) per line .
In order to make a column side-by-side in your mobile device, you need to specify them with _col-xs-_

<div class="row">
  <div class="col-xs-8 col-md-8 ">.col-xs-8 and col-md-8</div>
  <div class="col-xs-4 col-md-4">.col-xs-4 and .col-md-4</div>
</div>

[Miqueliu]

You (@heikojansen and @ralfting) did not understand my explanation.

I know perfectly well there are 1 column per line for the smallest devices. The only problem (as I wrote previuosly) is that divs have not any float style declaration as expected.

[ralfting]

Hey @Miqueliu, sorry about that.
So what you expected about float style? What is behavior he back?
Look this: #grid-options

Behavior default is display: block for mobile and tablet devices and float: left for others (col-md-* col-lg-*).

Paste for us a example for this. Thanks!

[cvrebert]

Closing since Bootstrap 3 is no longer officially supported. Feel free to continue the discussion though.

[Miqueliu]

Take a simple example, @ralfting:

<div class="row">
  <div class="col-lg-8">
    <h2>Title 1</h2>
  </div>
  <div class="col-lg-5">
    <h2>Title 2</h2>
  </div>
</div>

You can appreciate the differences between large and medium device (aside from the smallest): without float styles, there is margin collapsing in headings (and other possible unexpected behaviors).

[Miqueliu]

@cvrebert, version 4 at present seems to be a testing distribution. Bootstrap 3 is the most used interface framework. Why did you close it?

[rafalp]

@Miqueliu please look here: https://github.com/twbs/bootstrap/issues/20631

[Miqueliu]

What a clutter! In official web page, version 3 is appearing as the ultimate.

[Miqueliu]

I just tested it in Bootstrap 4. There is the same bug. @cvrebert, please, open this issue.

[ralfting]

@Miqueliu thanks for example!

Your "DIV" break line because the sum of the columns is 13 ( This have float: left, but no has space in the same row, then he break line ).

So when specify only column large( col-lg-*) why smaller device don’t have float style?
You specify only col-lg, so smaller device always display: block, it's happens because Bootstrap v3 is mobile first.

Grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes, and override grid classes targeted at smaller devices. Therefore, e.g. applying any .col-md-* class to an element will not only affect its styling on medium devices but also on large devices if a .col-lg-* class is not present. - http://getbootstrap.com/css/#grid

Margin collapsing:
Always add the contents inside a .container, for apply all display css.

Look this example I hope some help: CodePen

Thanks for discussion @Miqueliu, see you.

[twbs-lmvtfy]

Hi @ralfting!

You appear to have posted a live example (http://codepen.io/ralfting/pen/BLpvAp.html), which is always a good first step. However, according to Bootlint, your example has some Bootstrap usage errors, which might potentially be causing your issue:

• line 26, column 3: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
• line 31, column 3: E003: Found one or more .rows that were not children of a grid column or descendants of a .container or .container-fluid
• line 19, column 5: E029: Since grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes (unless overridden by grid classes targeting larger screens), class="col-md-5 col-lg-5" is redundant and can be simplified to class="col-md-5"
• line 20, column 5: E029: Since grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes (unless overridden by grid classes targeting larger screens), class="col-md-7 col-lg-7" is redundant and can be simplified to class="col-md-7"
• line 32, column 5: E029: Since grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes (unless overridden by grid classes targeting larger screens), class="col-md-5 col-lg-5" is redundant and can be simplified to class="col-md-5"
• line 33, column 5: E029: Since grid classes apply to devices with screen widths greater than or equal to the breakpoint sizes (unless overridden by grid classes targeting larger screens), class="col-md-7 col-lg-7" is redundant and can be simplified to class="col-md-7"

You'll need to fix these errors and post a revised example before we can proceed further.
Thanks!

(_Please note that this is a fully automated comment._)

[Miqueliu]

@ralfting, the overflowed columns were my intention, for viewing specificly the difference in margin collapsing.

Besides, the appearance of floating style is totally independent to small devices: In medium devices the same happens.

[ralfting]

@Miqueliu please show an example by CodePen which should contain the bug.

[Miqueliu]

CodePen's support is not necessary.

Take this example:

<div class="row">
  <div class="col-xs-3">
    <div class="row">
      <div class="col-lg-12">
        <h2>Title 1</h2>
      </div>
      <div class="col-lg-12">
        <h2>Title 2</h2>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-md-12">
        <h2>Title 1</h2>
      </div>
      <div class="col-md-12">
        <h2>Title 2</h2>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-sm-12">
        <h2>Title 1</h2>
      </div>
      <div class="col-sm-12">
        <h2>Title 2</h2>
      </div>
    </div>
  </div>
  <div class="col-xs-3">
    <div class="row">
      <div class="col-xs-12">
        <h2>Title 1</h2>
      </div>
      <div class="col-xs-12">
        <h2>Title 2</h2>
      </div>
    </div>
  </div>
</div>

And test, resizing your browser. Can you see some height variations?