Question

I am working on my first Bootstrap project and am a little stuck. At the top of the page, I want a logo on the left side and 2 buttons on the right side stacked on top of each other. This is what I have so far:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span4">
      <img src="/img/logo.png" width="120" />
    </div>
    <div class="span8">
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-map-marker"></i> Find Location</a><br />
      <a class="btn btn-large" href="#" style="width:100%;"><i class="icon-comment"></i> Call Now</a>    
    </div>
  </div>
</div>

It works as expected on a desktop, but I on the iPhone, the span8 column breaks and appears on the next line. Is there any way to override this?

Answer 1

That is the expected behavior of the responsive grid, you can see the same effect happening on the bootstrap documentation page (specially on the scaffolding demo) when you resize the screen. You can overcome this by creating your own class to include inside the span tags you want to keep side by side on a mobile device and we can top it off by wrapping it into a media query that should be triggered on a mobile device with a screen size of 480px or below (aka, an iphone), this way it won’t affect the desktop responsive grid until it reaches that constraint.

CSS

@media all and (max-width: 480px)  {
    .half {
        float: left !important;
        width: 50% !important;
    }
}

Demo, try viewing this demo on your mobile device, http://jsfiddle.net/r5VCy/1/show/.