## Update for Bootstrap v3.2.0

This is now natively solved in Bootstrap v3.2.0 with [this commit][sha bdd7651e]

According to the [new responsive classes documentation][responsive classes]:

> As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below:



<pre><code><b>Group of classes</b>          | <b>CSS display</b>
 .visible-*-block         |  display: block;
 .visible-*-inline        |  display: inline;
 .visible-*-inline-block  |  display: inline-block;
</code></pre>


For example, you could use:



<pre><code>&lt;p&gt;Device is: &lt;span class=&quot;<b>visible-lg-inline</b>&quot;&gt;Large&lt;/span&gt;&lt;/p&gt;
</code></pre>


----

## Other Instances

Asked about on Stackoverflow:

* [Bootstrap 3 class visible-lg moves span to a new line][Bootstrap Inline Visible]

Reported in Bootstrap Issues:

* [#4929 - Responsive utility classes may cause unexpected wrapping][#4929]
* [#7808 - Using display inherit in responsive utilities causes elements to be wrongly displayed][#7808]
* [#8500 - responsive class usage with inline element ][#8500]
* [#8869 - responsive .hidden-* classes change from display block to inline-block][#8869]
* [#10263 - visible-xs makes display=block even for inline elements][#10263]



[fiddle]: http://jsfiddle.net/KyleMit/pH8xv/
[fiddleDemo]: http://jsfiddle.net/KyleMit/pH8xv/show/light/
[screenshot]: http://i.imgur.com/xEeylH2.png

[#4929]:  https://github.com/twbs/bootstrap/issues/4929
[#7808]:  https://github.com/twbs/bootstrap/issues/7808
[#8869]:  https://github.com/twbs/bootstrap/issues/8869
[#10263]: https://github.com/twbs/bootstrap/issues/10263
[#8500]:  https://github.com/twbs/bootstrap/pull/8500

[sha bdd7651e]: https://github.com/twbs/bootstrap/commit/bdd7651e323a93a4e3d207463451dd374b0a70fa


[Bootstrap Inline Visible]: https://stackoverflow.com/q/23302759/1366033

[bootstrap.inline-responsive]: https://github.com/moappi/bootstrap.inline-responsive
[responsive classes]: http://getbootstrap.com/css/#responsive-utilities

Bootstrap has some nice `.visible-*` (eg. `.visible-lg`) class utility for selecting what to show or hide depending on the screen size.

When using those classes, it applies the styling `display: block !important;` when in the correct screen size.

But sometimes, I'd like to use it for some elements that are displayed `inline` or `inline-block`.

How could I cleanly override some bootstrap rules to have the choice? Or should it be a feature request in bootstrap?

---
EDIT

Seems like I'm not the only one wondering about this issue. Here's the [github issue][1].

Thanks for the latest answer!

  [1]: https://github.com/twbs/bootstrap/issues/8869

Bootstrap3 .visible-* .hidden-* display inline

Here's a simplified version of your markup that helps more easily reproduce the issue:



    <div class="row">
        <div class="col-xs-2 pull-bottom"
             style="height:100px;background:blue">
        </div>
        <div class="col-xs-8 pull-bottom"
             style="height:50px;background:yellow">
        </div>
    </div>

So how do we vertically align each column to the bottom? See [vertical-align with bootstrap 3][so align]:



    .pull-bottom {
        display: inline-block;
        vertical-align: bottom;
        float: none;
    }

#[Working Demo in jsFiddle][fiddle]

[![screenshot][screenshot]][fiddle demo]

[so align]: https://stackoverflow.com/q/20547819/1366033
[fiddle]: http://jsfiddle.net/KyleMit/2cPcA/
[fiddle demo]: http://jsfiddle.net/KyleMit/2cPcA/show/light
[screenshot]: http://i.imgur.com/vz8kYmx.png

I have a parent element that has Bootstrap 3's `.row` CSS class. Within this element are two child elements (each with a Bootstrap column class), one of which has a varying height depending on the data populating it. In the design I'm working with, the elements in this row need to be anchored to the bottom of the parent element. 

The kicker (as the title and use of bootstrap suggests) is that this needs to be responsive. Thus absolute positioning of the child elements with `bottom: 0px;` is not an option. 

Here's the current structure of the html:

    <div class="row r4">
        <div class="col-md-2">
            <div class="bottom">
                <div data-bind="text: description()"></div>
                <span data-bind="text: metric()"></span>
            </div>
        </div>
        <div class="col-md-8">
            <div class="bottom">
                <div data-bind="foreach: keyLabels()">
                    <div class="key-color">
                        <div data-bind="attr: {class: color + ' color-value'}"></div>
                        <div data-bind="text: label"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


I've done some research and haven't found a reliable method of solving this using a pure HTML/CSS solution. 

I can think of a number of fairly straight-forward (albeit hacky) ways to solve this with JS, but for now I'd like to avoid that with possible.

Any ideas?

How Do You Anchor Multiple Child Elements to the Bottom of a Parent Element in a Responsive Design?

I'd start with a search for "Bootstrap Thumbnail Grid".

To get you started, `.thumbnail > img` will cause the image to take up 100% of it's placeholder.  
If you put the thumbnails inside of responsive columns with the same width, they should line up:



    <div class="row">
        <div class="col-xs-3">
            <a href="#" class="thumbnail">
            <img src="http://placehold.it/400x200" alt="..." />
            </a>
        </div>
        <div class="col-xs-3">
             <a href="#" class="thumbnail">
            <img src="http://placehold.it/300x150" alt="..." />
            </a>
        </div>
        
    </div>

##[Working demo in jsFiddle][fiddle]

[![screenshot][screenshot]][fiddle demo]

[fiddle]: http://jsfiddle.net/KyleMit/yau93/
[fiddle demo]: http://jsfiddle.net/KyleMit/yau93/show/light
[screenshot]: http://i.imgur.com/dvY7VFg.png

Keeping it short, I'm trying to accomplish the way https://artsy.net/browse/artworks? stacks their thumbs.

I've going crazy trying different things with bootstrap 3. But I'm starting to think that this has to be done with JS (??).

My first choice is to use a pre made jQuery plugin, but haven't found any.

Maybe I'm going blind now after many tries. I'm not asking for the exact solution, I just need some pointers as to what to look into or search for.

Stack different sized images keeping their size

Adapted from [Isherwood's answer in this very similar question][isherwood]:

Have them in order on a small screen, and then on a larger screen, pull them to the appropriate side of the page:



    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-6 blue pull-right"></div>
            <div class="col-xs-12 col-sm-6 black pull-left"></div>
            <div class="col-xs-12 col-sm-6 green pull-right"></div>
        </div>
    </div>

## [Demo in Fiddle][fiddle]

![screenshot][screenshot]

[isherwood]: https://stackoverflow.com/a/24788626/1366033
[fiddle]: http://jsfiddle.net/KyleMit/NDN7W/
[screenshot]: http://i.imgur.com/ztcEK57.png

On a page I have two columns. On the first one (black), I have one section which contains an image. The second one, has two blocks (blue and green).

I want to change the order of the three sections like in this schema I have made:

![screenshot](http://i.imgur.com/EdPiN65m.png)

I found some way of doing with push and pull, but it's only put the black block last instead of first.


Change section order with Bootstrap 3

## Demo of the Problem:

[Not all browsers react the same][timkadlec], but typically browser's will load content from a `src` attribute, regardless of whether some other CSS rule renders that element as invisible.

Here's a baseline example:



    <img class="visible-xs img-responsive" src="http://placehold.it/768x150" />
    <img class="visible-sm img-responsive" src="http://placehold.it/992x150" />
    <img class="visible-md img-responsive" src="http://placehold.it/1200x150"/>
    <img class="visible-lg img-responsive" src="http://placehold.it/2000x150"/>

[**Demo in jsFiddle**][Demo 1] 

Whenever I refresh the page, the browser loads all images, even ones that are initially invisible:

![load-all][load-all]



## Background Image + Media Queries

This tutorial on [Simple Responsive Images With CSS Background Images][background-images] goes into more depth, but the basic solution works like this:

Create a simple div:



    <div class="responsiveBackgroundImage" id="myImage" ></div>

And then sub in the correct background image depending on the screen size:

We'll probably want *all* the background images to share a couple basic properties like this:



    .responsiveBackgroundImage { 
        width:100%;
        background-size: 100%;
        background-position: 50% 0%;
        background-repeat: no-repeat;
    }   

Then replace the `background-image` property  for this particular element at each resolution:



    #myImage {background-image: url(http://placehold.it/768x150); }
    @media (min-width: 768px)  { #myImage { background-image: url(http://placehold.it/992x150); }}
    @media (min-width: 992px)  { #myImage { background-image: url(http://placehold.it/1200x150);}}
    @media (min-width: 1200px) { #myImage { background-image: url(http://placehold.it/2000x150);}}

[**Demo in jsFiddle**][Demo 2]     



## Replacing Images with Javascript

Due to limitations with using background images, you might decide to use a real `img` element and then just dynamically load the images.  Rather than loading the element itself, you can do something similar to what angular does with [`ng-src`][ng-src] when evaluating an expression that resolves to a url.  When the browser loads each element, it wouldn't be able to find the file location of `src="{{personImageUrl}}"`.  Instead, Angular saves the intended url as a data attribute and then loads when appropriate.

First, take each of your images and prefix the `src` attribute with `data-`.  Now the browser won't automatically start implementing anything, but we still have the information to work with.



<pre><code>&lt;img class=&quot;visible-xs img-responsive&quot; <b>data-</b>src=&quot;http://placehold.it/768x150&quot;/&gt;
</code></pre>


Then query for all the dynamic images we'll eventually want to load.



    $dynamicImages = $("[data-src]");

Next, we're going to want to capture window resize events, and on the very first page load, we'll trigger one just so we can make use of the same code.  Use a function like this:



    $(window).resize(function() {
        // Code Goes Here
    }).resize();

Then check if each dynamic image is visible.  If so, load the image from the data attribute and remove it from the array so we don't have to keep checking and loading it.

    $dynamicImages.each(function(index) {
        if ($(this).css('display') !== 'none') {
            this.src = $(this).data('src');
            $dynamicImages.splice(index, 1)
        }
    });

[**Demo in jsFiddle**][Demo 3]  

[Demo 1]: http://jsfiddle.net/KyleMit/tbq5kesc/0/
[Demo 2]: http://jsfiddle.net/KyleMit/tbq5kesc/3/
[Demo 3]: http://jsfiddle.net/KyleMit/tbq5kesc/2/

[ng-src]: https://docs.angularjs.org/api/ng/directive/ngSrc

[timkadlec]: http://timkadlec.com/2012/04/media-query-asset-downloading-results/
[load-all]:http://i.imgur.com/QBuNgDM.png
[background-images]: http://www.smashingmagazine.com/2013/07/22/simple-responsive-images-with-css-background-images/

I'm running Twitter Bootstrap 3.2.

My page has a banner image for every breakpoint. That means code like this:

    <img class="visible-xs img-responsive" src="headline-768px.jpg">   (128kb)
	<img class="visible-sm img-responsive" src="headline-992px.jpg">   (144kb)
    <img class="visible-md img-responsive" src="headline-1200px.jpg">  (264kb)
    <img class="visible-lg img-responsive" src="headline-2000px.jpg">  (380kb)
    
The main purpose of having 4 different images is so that mobile devices don't need to download the larger versions. But Bootstrap preloads all the versions regardless of screen size, even if they're hidden at the current breakpoint. This amounts to hundreds of unnecessary kb for every viewer.

Is there a way around this?

Prevent Bootstrap from preloading all the hidden-* images

There are two issues here:

1. One is that the jsFiddle does not include the viewport tag so the device emulation does not try to resize the viewport.  Without that, you cannot take advantage of Bootstrap's responsive class sizes.  Make sure to include the following as the first item in your head element:

        <meta name="viewport" content="width=device-width, initial-scale=1">

 [Here's a plunker that includes a runnable instance][1]

2. The other issue is that you have `class` defined twice in you main div:

        <div class="main" class="hidden-xs">

  So if you inspect the element, you'll actually notice that the second class is ignored and you never pull in `hidden-xs`.  Instead add them both separated by a space like this:

        <div class="main hidden-xs">


Now it should work fine:

[![demo][0]][2]

[0]: http://i.imgur.com/swYr0k9.png
[1]: http://plnkr.co/edit/Krzh8RgMPvXb5V3UuePY
[2]: http://run.plnkr.co/plunks/Krzh8RgMPvXb5V3UuePY/

I am trying to create a site, that will hide an extended section for users on a small screen using Bootstrap's `.hidden-xs` To test it, I am using Chrome's mobile emulator, setting it to "iPhone 5" (pretty small). When I refresh  the page, however, it does not hide the div. Am I using the class wrong?

*HTML*

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta name="viewport" content="width=device-width, intial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
            <link rel="stylesheet" type="text/css" href="static/css/todo.css">
    		<title>TODO</title>
    	</head>
    
    	<body>
    		<div class="container-fluid">
            	<header>
                	
                </header>
                <div id="left">
                	<div class="test"></div>
                	<div class="test"></div>
                	<div class="test"></div>
                	<div class="test"></div>
                	<div class="test"></div>
                	<div class="test"></div>
                	<div class="test"></div>
                </div>
                <div class="main" class="hidden-xs">
                </div>
            </div>
    	</body>
    </html>

*CSS*

    /* CSS Document */
    
    body {
    	margin: 0;
    }
    
    header {
    	height: 10em;
    	width: 100%;
    	border-bottom: 1px solid #000000;
    }
    
    #left {
    	float: left;
    	height: 80%;
    	max-width: 100%;
    	width: 20%;
    	border-right: 1px solid black;
    	overflow: scroll;
    }
    
    #main {
    	float: left;
    	width: 80%;
    	height: 100%;
    }
    
    .test {
    	height: 10em;
    	background-color: #eeeeee;
    	width: 100%
    }
    
    .test:hover {
    	background-color: #dddddd;
    }

here is a JSFiddle demonstrating my code: https://jsfiddle.net/James_Parsons/jwqdbn61/

**EDIT**

Apparently an iPhone 5 is not small enough. If I use both `.hidden-xs` and `.hidden-sm` will it be hidden on all small devices?

Bootstrap `.hidden-xs` does not hide div

It's because you need to nest col calls inside of a `.row` class so they can properly clear the floats. 

Right after the combo boxes, the line `<div clas="row text-center"><div class="col-md-12>`" is getting overlayed on top of the other fields.  Either add them above it or add `style="clear:both"` to the row column.

[**Here's a working demo in fiddle**](https://jsfiddle.net/KyleMit/2Lmgwecy/)

I have a fairly complex Bootstrap 3 tabgroup of forms that are populated with combo boxes that work fine at desktop width, but in mobile the combo boxes are frozen or something and won't show the drop down.

Here is the first of the four forms embedded in the tab-group...

             <form role="form" id="prop-search"  name="prop-search" method="get" target="_blank" action="search.php">
                
                  <input type="hidden" name="searchtype" value="Residential">
                

                  
                  <div class="col-md-2 col-sm-6 col-xs-6">      
                    <div class="form-group">
                      <label for="location">City</label>
                      <select class="form-control" id="area" name="area">
                      
                        <?php
                          $action=basename(__FILE__, '.php');               // load action from filename for consistancy 
                          $controller = new retsController($action . '-cities'); // register controller with page action and parameter
                          $controller->invoke();                            // invokde controller to get view
                        ?>     

                      </select>
                    </div>
                  </div>
                  
                  <div class="col-md-2 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="type">Type</label>
                      <select class="form-control" id="proptype"  name="proptype">
                        <option selected>House</option>
                        <option>Condo</option>
                        <option>Townhome</option>                    
                      </select>
                    </div>
                  </div>
                    
                  <div class="col-md-2 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="bathroom">Baths</label>
                      <select class="form-control" id="baths" name="baths">
                        <option>1</option>
                        <option selected>2</option>
                        <option>3</option>
                        <option>4+</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-md-2 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="bedroom">Beds</label>
                      <select class="form-control" id="beds" name="beds">
                        <option>1</option>
                        <option>2</option>
                        <option selected>3</option>
                        <option>4+</option>
                      </select>
                    </div>
                  </div>
                                           
                  <div class="col-md-2 col-sm-6 col-xs-6">
                    <div class="form-group">
                      <label for="minprice">$-Range</label>
                      <select class="form-control" id="pricerange" name="pricerange">
                        <option value="0-100">$0-$100k</option>
                        <option value="100-175">$100k-$175k</option>
                        <option value="175-250" selected>$175k-$250k</option>
                        <option value="250-325">$250k-$325k</option>
                        <option value="325-400">$325k-$400k</option>
                        <option value="400-500">$400k-$500k</option>
                        <option value="500-600">$500k-$600k</option>
                        <option value="600-750">$600k-$750k</option>
                        <option value="750-900">$750k-$900k</option>
                        <option value="900-1100">$900k-$1.1m</option>
                        <option value="1100-1500">$1.1m-$1.5m</option>
                        <option value="1500-100000">$1.5m+</option>              
                      </select>
                    </div>
                  </div>
                
                  
                  <div class="row text-center">
                    <div class="col-md-12">
                      <div class="form-group">     
                      
                        <input type="submit" name="submit" value="search" class="btn btn-default btn-block">  
                      </div>                     
                    </div>
                  </div>
             
                </form>

Here is a quick-n-dirty fiddle showing the problem.

https://jsfiddle.net/edkwudy9/

Notice that if you pull the width wide enough where you get the 6 columns (col-md-2 in Bootstrap), the dropdowns work just fine, but when you shrink the width to col-sm-6 col-xs-6, they stop working.

I just have no idea what could be wrong and I'm burning through unbillable hours with this issue like no ones business.  

I am a backend developer who got myself roped into this project and now find myself somewhat over my head with debugging BS3 and mobile.

the actual dev site to see the control in action...

http://webwarephpdevelopment.com:8080/index.php