Tw Bootstrap: How to Overflow Columns

TW Bootstrap: How to overflow columns

Updated

I guess you just missed the float: none; : float forces display: block;.

Live demo (jsfiddle)

<div class="myClass">
    <div class="row">
        <div class="span5"></div>
        <div class="span5"></div>
        <div class="span5"></div>
    </div>
</div>

div.myClass {
    overflow-x: auto;
    white-space: nowrap;
}
div.myClass [class*="col"], /* TWBS v3 */
div.myClass [class*="span"] {  /* TWBS v2 */
    display: inline-block;
    float: none; /* Very important */
}

Anyway this is not because you can do it that you should. There are things like carousels that can achieve this kind of effects.

IMHO a web page is originally meant to be horizontally scrolled whereas JavaScript can do anything.

Bootstrap 4 columns overflowing instead of resizing

You put margin: 1rem; on .outerDivBorder, and that margin pushes content out on small screens. Use padding on cols instead - it can be done by using utility class for padding, py-3 in this case:

.outerDivBorder {

    width: 100%;

    border: 1px solid #454343;

    padding: 0 1rem;

}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">

   <div class="row">

       <div class="col-lg-9 col-md-12 py-3">

           <div class="outerDivBorder" id="photoBox">

               <div style="height: 10em;"></div> 

           </div>

       </div>

       <div class="col-lg-3 col-md-12 py-3">

            <div class="outerDivBorder" id="dataBox"> 

                <div style="height: 10em;"></div> 

            </div>

       </div>

   </div>

</div>

How to overlap columns using twitter bootstrap?

You have three options:

Use Twitter Bootstrap v1.XX where the grid was 16 instead of 12. Then you can do whatever you like with the two that will be left.

Here the old docs with the latest v1.X (which is 1.4.0): http://bootstrapdocs.com/v1.4.0/docs/

As for the v1.4 bootstrap files, https://github.com/twitter/bootstrap/zipball/v1.4.0

Customize your Bootstrap v2.XX build

Here you customize everything and make a custom build: http://twitter.github.io/bootstrap/customize.html

Ps.:You will probably need to re-do all span* organization in yout HTML file if you use the customization option - that is, change to 14 (or 16) columns, as well as set new values for margin/padding.

(Thanks @jmeas for pointing out the Customization, had forgotten that).

Since you said they could've overlap, you could use the default build and use the following.

What I did was get the offset* class and simply create a offset-*, with negative value.

HTML:

<div class="container">
    <div class="row-fluid">
        <div class="span3">xx</div>
        <div class="span8 offset-1">yy</div>
        <div class="span3 offset-1">zz</div>
    </div>
</div>

CSS:

.row-fluid .offset-1 {
    margin-left: -10.638297872340425%;
    *margin-left: -10.53191489361702%;
}
.row-fluid .offset-1:first-child {
    margin-left: -8.51063829787234%;
    *margin-left: -8.404255319148938%;
}

See Fiddle
I added some RGBA colors so you can see they overlap, while keeping the '12 grid'.

8 Columns in Twitter Bootstrap

<div class="row">
      <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-3">
                            1
                </div>
                <div class="col-xs-3">
                            2
                </div>
                <div class="col-xs-3">
                            3
                </div>
                <div class="col-xs-3">
                            4
                </div>
          </div>
    </div> 
    <div class="col-xs-6">
            <div class="row">
                <div class="col-xs-3">
                            5   
                </div>
                <div class="col-xs-3">
                            6
                </div>
                <div class="col-xs-3">
                            7
                </div>
                <div class="col-xs-3">
                            8
                </div>
          </div>
    </div>
</div>

Organising a 3-column to 2-column in Twitter Bootstrap 3

So here goes,

first of all you should use the designs for smaller screens BEFORE larger screens like so:

<div class="col-sm-6 col-lg-3"> (...)

Now for your design to happen you need to to this:

<div class="col-sm-6 col-lg-3">
1
</div>
<div class="col-sm-6 col-lg-3 col-lg-push-3">
3
</div>
<div class="col-sm-6 col-lg-3 col-lg-pull-3">
2
</div>

...what I did is that I reversed the 2nd with 3rd column so that they fit my needs for the smaller screen and then by using push and pull I adjusted for the larger screens.

edit: here is a working fiddle:

http://jsfiddle.net/ujrwyrbr/2/

How can I ensure columns wrap equally in Twitter Bootstrap 3?

Thats unfortunately not how the grid works. You could use something like masonry or have different containers generated for each breakpoint with php. e.g.:

<div class ="visible-xs"><div class ="row">... </div></div>
<div class ="visible-sm"><div class ="row">... </div></div>
<div class ="visible-md"><div class ="row">... </div></div>

How can I ensure columns wrap equally in Twitter Bootstrap 3?

Thats unfortunately not how the grid works. You could use something like masonry or have different containers generated for each breakpoint with php. e.g.:

<div class ="visible-xs"><div class ="row">... </div></div>
<div class ="visible-sm"><div class ="row">... </div></div>
<div class ="visible-md"><div class ="row">... </div></div>

5 equal columns for large screen only - bootstrap 5

Check the documentation - you need to use col-md to specify that you only want columns on medium screens or larger.

<div class="row">
   <div class="col-md">
      1 of 5
   </div>
   <div class="col-md">
      2 of 5
   </div>
   <div class="col-md">
      3 of 5
   </div>
   <div class="col-md">
      4 of 5
   </div>
   <div class="col-md">
      5 of 5
   </div>
</div>

Tw Bootstrap: How to Overflow Columns