Twitter bootstrap alignment issues

Question

I'm making a mobile application using Twitter Bootstrap to handle the UI. Additionally I am using font-awesome and flat-ui.

My problems are:

1. Can't vertical align header image with img-responsive
2. Options icon goes off of page

When I am viewing the page in a large window, the spacing is fine; for example:

Now when the window is shrunk (to the size of what is displayed on a mobile device) I start to experience the problems. Example:

And here is the bounding boxes to make it a little more obvious:

EDIT:

Vertical Alignment problem solved using fixed margins and max-width.

Icon problem still remains.

HTML

    <div class="container">
    <br />
    <br />  
    <div class="row">           
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <a class="btn btn-inverse" href="#"><i class="fa fa-home fa-2x"></i> </a>
            </div>
            <div id="logo" class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
                <img src="images/example.png" alt="example" class="img-responsive">
            </div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <a class="btn btn-inverse" href=".\options.html"><i class="fa fa-cogs fa-2x"></i></a>
            </div>
    </div>

    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <a class="btn btn-primary" href=".\1.html">Link 1</a>
            </div>
            <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3">      
                <a class="btn btn-primary" href=".\2.html">Link 2</a>
            </div>  
            <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <a class="btn btn-primary" href=".\3.html">Link 3</a>
            </div>  
            <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3">
                <a class="btn btn-primary" href=".\4.html">Link 4</a>  
            </div>  
        </div>
    </div>
    <br />  
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <img src="images/image.jpg" alt="image" class="img-rounded img-responsive">
            <br />
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <a href=".\start.html" class="btn btn-block btn-lg btn-primary">START</a>
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <a href=".\fav.html" class="btn btn-block btn-lg btn-fav">FAVORITE</a>
        </div>
    </div>
    <hr>
</div>
<!-- Container -->

CSS

body { 
    text-align:center;  
    background-color: #1E1E1E; 
    color: #D8D8D8; 
}

.row-coloured { 
    /* Green background */
    background-color: #29591D; 
}

.centered {   
    vertical-align: middle;
    text-align: center;
}   

.btn-fav {
    background: #5f774e;
    border-color: #eaf2ea;
}

.btn-fav:hover {
    background: #789463;
    border-color: #eaf2ea;
}

@media only screen 
and (max-width : 768px) {

  #logo img {
    width: 200px;
    height: auto;
    margin: 16px auto;
  }

}

.col-xs-2 > a {
  display: inline-block;
  margin: 6px 0;
}

Any ideas as to how to prevent this/why it's happening? I feel like I've tried 50 things without any progress.

Answer 1

It's happening because the the .img-responsive class makes the image have a max-width of 100%. The image's height is then scaling with that, so it's not as tall as it was.

You could set a pixel size for the logo on smaller devices using media queries and then set the margin top to realign it with the icons. (note I added a #logo ID below).

@media only screen 
and (max-width : 768px) {

  #logo img {
    width: 200px;
    height: auto;
    margin: 12px auto;
  }

}

The icons are going off because they have the .btn class, which has padding: 6px 12px. On the small device that padding causes the element to be wider than it's container (the col-xs-2 so they're overflowing their container. You could remove the .btn .btn-inverse class and then tweak the styles on your icons with CSS.

.col-xs-2 > a {
  display: inline-block;
  margin: 6px 0;
}

DEMO

---

EDIT

As ilias mentioned in his answer, don't mess with the grid styles. Remove the block of code where you set columns to be inline-block as they said.

Answer 2

I think that according to the bootstrap documentation .col- elements should be immediate children of row elements. You should fix the following:

 <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this-->
            <a class="btn btn-primary" href=".\1.html">Link 1</a>
      </div>
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this-->      
            <a class="btn btn-primary" href=".\2.html">Link 2</a>
      </div>  
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this-->
            <a class="btn btn-primary" href=".\3.html">Link 3</a>
      </div>  
      <div class="row-coloured col-xs-3 col-sm-3 col-md-3 col-lg-3"><!--this-->
            <a class="btn btn-primary" href=".\4.html">Link 4</a>  
      </div>  
    </div>
 </div>

Try wrapping the elements that produce padding inside children divs of the .col- elements like this:

    <div class="row">           
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <div class="topwrappers"><!-- like this -->
            <a class="btn btn-inverse" href="#">
              <i class="fa fa-home fa-2x"></i> 
            </a>
          </div>
        </div>
        <div class="img2 col-xs-8 col-sm-8 col-md-8 col-lg-8">
          <div class="topwrappers" id="topcenter"><!-- like this -->
            <img src="images/example.png" alt="example" class="img-responsive">
          </div>
        </div>
        <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
          <div class="topwrappers"><!-- like this -->
            <a class="btn btn-inverse" href=".\options.html">
              <i class="fa fa-cogs fa-2x"></i>
            </a>
        </div>
    </div>
  <!--And so on for the rest.-->

Also try removing the stray <br/> and <hr/> between the divs then delete this from your css as I think it will mess the grid:

.col-xs-8 .col-sm-8 .col-md-8 .col-lg-8 {
   float:none;
   display:inline-block;
   vertical-align:middle;
   margin-right:-4px;
}

and add this:

.topwrappers{
   width:100%;
   height:100%;
}

#topcenter{
  text-align:center;
}