Bootstrap 3 Column Wraps in Portrait View Only

Bootstrap 3 Column Wraps in Portrait View Only

As @PiLHA suggested, it seems bootstrap's 3 grid system does not support 1 column spans in screens with a width less than approximately 360px. The issue comes from the fixed padding of 15px that is added on each side to each column.

Now some math to explain the issue:

A one column span .col-xs-1 has a defined width of: 8.333333333333332%; (that's 100/12)

In a screen of 320px like the iPhone's that's roughly equal to 27px; but the combined padding is forcing its width to 30px. Those extra pixels are the ones causing the <div> to break to the next line.

So an easy fix would be to just decrease the padding in that column size:

.col-xs-1 {
    padding-left: 5px;
    padding-right: 5px;
}

Or you could also decide to use col-xs-10 and col-xs-2 in your markup

That being said, you should take a note on what @SeanRyan posted in his answer and fix your markup, I was going to post something similar but I believe his answer is well laid out and there's no need to repeat the same pointers.

using nested columns in bootstrap gives unexpected result

I think you want the col-xs-10 outside the .row for the negative margins on the nested cols to work correctly..

<div class="container">
        <div class="row" style="color: #FFFFFF">
            <div class="col-xs-1">
                1</div>
            <div class="col-xs-10">
                <div class="row" style="color: #FFFFFF">

                        <div class="col-xs-4" style="background-color: #0099FF">
                            2</div>
                        <div class="col-xs-4" style="background-color: #33CC33">
                            3</div>
                        <div class="col-xs-4" style="background-color: #CC33FF">
                            4</div>

                </div>
            </div>
            <div class="col-xs-1">
                5</div>
        </div>
</div>

Demo: http://www.bootply.com/nyv0SEi3B4

Bootstrap 3: pull-right for col-lg only

You could put "element 2" in a smaller column (ie: col-2) and then use push on larger screens only:

<div class="row">
    <div class="col-lg-6 col-xs-6">elements 1</div>
    <div class="col-lg-6 col-xs-6">
      <div class="row">
       <div class="col-lg-2 col-lg-push-10 col-md-2 col-md-push-0 col-sm-2 col-sm-push-0 col-xs-2 col-xs-push-0">
         <div class="pull-right">elements 2</div>
       </div>
      </div>
    </div>
</div>

Demo: http://bootply.com/88095

Another option is to override the float of .pull-right using a @media query..

@media (max-width: 1200px) {
    .row .col-lg-6 > .pull-right {
        float: none !important;
    }
}

Lastly, another option is to create your own .pull-right-lg CSS class..

@media (min-width: 1200px) {
    .pull-right-lg {
        float: right;
    }
}

UPDATE

Bootstrap 4 includes responsive floats, so in this case you'd just use float-lg-right.
No extra CSS is needed.

Bootstrap 4 Demo

Bootstrap 3 - Equal Size Image Gallery

Set the col-xs-4 div a fixed height, then use jQuery to set the current img tag to the col-xs-4 background-image css property, like this.

$(".img-to-bg").each(function(){
var img = $(this).find("img");
  $(this).css({
    "background-image": "url('"+img.prop("src")+"')",
    "background-size": cover,
    //Any other CSS background propriety
    //If your want the div to be square (same width and height)
    height: $(this).height()
  });
  img.remove();
});

User the img-to-bg class for the col-xs-4 divs

Bootstrap: why does the col-1 flow down (stack up) when it's not supposed to?

This is because there's normally 15px of padding in a column (on both sides) but you can easily reduce that padding by applying a Bootstrap 4 class like p-1 or p-2.

The p-0 class would remove the padding completely but I assume that you do want to keep some padding and the p-2 class prevents stacking even on the smallest screens (320px) while still providing the benefit of padding.

Working code snippet:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">    <div class="row">        <div class="col-1 p-2">            <img src="http://www.unixstickers.com/image/cache/data/stickers/jsfiddle/JSfiddle-blue-w-type.sh-600x600.png" style="width:20px;" />        </div>        <div class="col-11">            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>            <span>Ut luctus consectetur dapibus.</span>            <span>Phasellus vestibulum dui non lacus ultricies egestas.</span>            <span>Aenean eros lorem, tincidunt eget eros nec, suscipit egestas elit</span>        </div>    </div></div>

Bootstrap grid with fixed wrapper - Prevent columns from stacking up

The sm,md,lg,etc.. cols wrap/stack responsively. Use the non-stacking col-xs-* class...

<div class="container">
  <div class="row">
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
    <div class="col-xs-4">.col-4</div>
  </div>
</div>

Demo: http://bootply.com/80085

EDIT: Bootstrap 4, the xs no longer needs to be specified..

<div class="container-fluid">
  <div class="row">
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
    <div class="col-4">.col-4</div>
  </div>
</div>

---

Related Topics