Develop Reference

Javascript Toggle Multiple Column Classes

I understand with single class instances how toggleClass works, for example
<div class="col-md-9" id="content></div>
$(#content").toggleClass("col-md-12 col-md-9");
This will toggle 12 columns and 9 columns. However, what if I set my class as such?:
<div class="col-sm-10 col-md-9" id="content"></div>
I can't find an example of toggling multiple classes for one element if I'm working with multiple breakpoints. Any clues?

Given your element:
<div class="col-sm-10 col-md-9" id="content"></div>
If you run
$("#content").toggleClass("col-sm-10 col-md-9 col-sm-6 col-md-3");
This will output the following, on the first call
<div class="col-sm-6 col-md-3" id="content"></div>
Then if you ran the toggle function call again, it would revert it back to
<div class="col-sm-10 col-md-9" id="content"></div>
Given your comment response, you would probably need two toggleClass calls
For the sidebar, you could toggle the larger column sizes, replacing them with smaller ones
The content area, you could toggle the column sizes to be larger, given that you made the sidebar smaller. Hypothetical example below.
To toggle the sidebar, you could run the following two toggleClass functions to "toggle" the sidebar.
$("#sidebar").toggleClass("col-sm-6 col-md-4 col-sm-3 col-md-2"); // Make sidebar 1/2 the size (width)
$("#content").toggleClass("col-sm-6 col-md-8 col-sm-9 col-md-10"); // Enlarge the content area
Untested code, but we're simply toggling between the two sets of dimensions for both elements here.
What the above snippet does is scale the sidebar smaller, rather than collapse, this is handy if your "collapse" button resides within your sidebar. If it doesn't then you could of course alter the column sizes to have the sidebar not be there at all.

Bootstrap 4: switch between cols on mobile

I've built a standard layout with a sidebar using Bootstrap's grid system (EDIT: I'm using Bootstrap 4 but could still switch). It looks like this:
<div class="row">
<div class="col-md-3">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
On mobile, the red area would be above the green one. I need to be able to switch between them in a way that is more convenient than scrolling, for example a switch button:
Also note the different oder of elements in the green area.
Is there a smart way to do this? Or do I have to alter the dom with JavaScript? Thanks in advance :)

You can use jQuery to toggle one of the BS4 flexbox utility classes. For example, apply the flex-last on the first (col-md-3) column.
To switch the order on mobile using a button, toggle the flex-last class...
$('#btnToggle').click(function(){
$('.col-md-3').toggleClass('flex-last');
})
EDIT: To show only one at a time (switch the visibility of the 2 divs using a button) toggle the hidden-sm-down class instead...
$('#btnToggle').click(function(){
$('.col-md-3, .col-md-9').toggleClass('hidden-sm-down');
})
Demo
In Bootstrap 4, column order can be toggled using CSS only, but this switches the cols based on screen width, and therefore is not triggered by the button.
<div class="row">
<div class="col-md-3 flex-last flex-md-unordered">
...
</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
<div class="col-md-4">...</div>
</div>
</div>
</div>
Update
As of Bootstrap 4 Beta 3, the ordering classes are named order-*, such as order-1, order-md-2, etc..

Bootstrap 4 uses Flexbox, which means you could utilise the order in which things are displayed.
As usual, you can specify how it's displayed on different viewports using classes like order-last and order-sm-unordered.
flexbox/order documentation

How do I selectively stack columns with twitter bootstrap

I have a template based on fluid example here:
http://twitter.github.io/bootstrap/examples/fluid.html
I have the latest files from here, the only customizations being colors:
http://twitter.github.io/bootstrap/customize.html
The basic markup is
<div class="container-fluid">
<div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
Column 1
</div><!--/.well -->
</div><!--/span-->
<div class="span9">
Column 2
</div><!--/span-->
</div><!--/row-->
</div>
Column 2 falls under column 1 on mobile devices, which is what I want sometimes. But in some cases (specific pages) I want the 2 columns to remain side by side. My question is how do I achieve this with the same js/css files?

Here's one possibility: http://jsfiddle.net/panchroma/RMPMA/
You will see that the columns don't drop on the row with class = double-col
CSS
#media (max-width: 767px){
.double-col.row-fluid [class*="span"] {
float: left;
width: 50%;
}
}
Since this resets the width of each col to 50% on viewpoints 767px and below, this will work with rows having two columns. For other combinations, simply play with the width setting. You might also want refine the padding and other styling, but easy enough now.
Hope this helps!

How do I determine the height of a div that has yet to be displayed on the page

I am using the tabs feature of the twitter bootstrap v2.2.2 API within divs being displayed using twitter modal (again, v2.2.2 of the bootstrap). The problem is, when I do this the modal dialog changes shape and size as the tabs change.
I have been looking at trying to set the size of the div that wraps the tab panes by interrogating those tab panes and setting the outer div to the maximum size and width encountered from the panes. Problem is, whatever I do I always seem to be unable to determine the size of those panes (I assume because they have yet to be displayed?).
My layout (roughly)...
<div id="ClientEditPanel" class="modal hide" role="dialog">
<div class="modal-header">
<h3>Client details</h3>
</div>
<div class="modal-body form-horizontal">
<ul class="nav nav-tabs">
<li><a class="active" data-toggle="tab" href="#ClientEditPanel_Tab_Personal">Personal</a></li>
<li>Profile</li>
<li>Other</li>
</ul>
<div id="ClientEditPanel_Tabs" class="tab-content">
<div id="ClientEditPanel_Tab_Personal" class="tab-pane active">
...
</div>
<div id="ClientEditPanel_Tab_Profile" class="tab-pane">
...
</div>
<div id="ClientEditPanel_Tab_Other" class="tab-pane">
...
</div>
</div>
</div>
<div class="modal-footer form-actions">
<input type="submit" class="btn btn-primary" />
</div>
</div>
this is further supported by the following CSS...
.tab-content {
overflow: auto;
}
.tab-content > .tab-pane, {
display: none;
}
.tab-content > .active, {
display: block;
}
I am trying to get the panes as follows...
$.each($(".tab-pane"), function () {
...
});
In theory it should then be as simple as setting the width of the parent div to the width of the widest child and the height of the parent div to the height of the tallest child. I want to measure ClientEditPanel_Tab_Personal, ClientEditPanel_Tab_Profile and ClientEditPanel_Tab_Other and set the maximums on ClientEditPanel_Tabs.
Through debugging, I can confirm that my selector is bringing back the right elements "this" clearly represents my first tab on the first pass through the iterator. Having ascertained that though, whichever property of the div that I interrogate is always null or zero. I have tried the following properties of "this"...
clientHeight
clientWidth
scrollHeight
scrollWidth
innerHeight
innerWidth
outerHeight
outerWidth
style.height
style.pixelHeight
offsetHeight
and probably a few more that I have not listed.
Does anybody have any further ideas that I might achieve what I am looking for. I am sure it can be done as I know that JQuery.dialog can automatically size the dialog to the content (including when combined with JQuery.tabs), but I am too far down the road with the twitter bootstrap to change now.
Thanks.

The height and width properties of an element aren't set until the element is rendered in HTML. You can push the container to be off the page, render the content, do some adjustments and then move the content back to the screen. From my personal experience, I would just render the output and then on document ready (jQuery) I would make the adjustment to the page. This should happen very fast and I haven't noticed any adverse affects as long as the number of elements is fairly small.

You can't read dimensions unless it is in DOM. As #Kalpers suggested, render it outside viewport (e.g. append to <body> and have position:absolute; top: -9999px or append anywhere else but add visibility:hidden, then get element dimensions.

Retaining Dimensions with FlexSlider

I am using the new flex slider and I want to retain the dimensions of my images. It keeps re-sizing the images no matter what options that I use. Has anyone hard-coded, and option where you can retain a certain height and width for your FlexSlider viewport?

Are you using Flexslider 2
Try using a containing element with a class like, .flexcontainer, and with a set width or max-width in your css to match the width of your images:
<div class="flexcontainer">
<div id="my-slider" class="flexslider">
<ul class="slides">
...
</ul>
</div>
</div>