Hello started working with bootstrap twitter today i'm trying to understand few things about the framework and i'm building a one page layout but i'cant center three spans can you help me understand better the rows and spans from twitter bootstrap and how can i center them ?http://jsfiddle.net/fBNsd/3/\[code\] <!DOCTYPE html><!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--><!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--><!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--><!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="http://stackoverflow.com/questions/14070304/css/bootstrap.min.css"> <link rel="stylesheet" href="http://stackoverflow.com/questions/14070304/css/bootstrap-responsive.min.css"> <link rel="stylesheet" href="http://stackoverflow.com/questions/14070304/css/main.css"> <script src="http://stackoverflow.com/questions/14070304/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> </head> <body> <!--[if lt IE 7]> <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p> <![endif]--> <!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html --> <div class="container"> <!-- Main hero unit for a primary marketing message or call to action --> <!-- Example row of columns --> <div class="row"> <div class="span11 offset1"> <ul class="thumbnails padding"> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://www.spacew.com/gallery/image005746-thumb.jpg" alt=""> </a> </li> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://www.noaanews.noaa.gov/stories2005/images/katrina-noaa-p3-view-08-28-2005c.jpg" alt=""> </a> </li> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://timesofindia.indiatimes.com/photo/14025462.cms" alt=""> </a> </li> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://www.richweb.f9.co.uk/astro/images/Moon.00004030.gif" alt=""> </a> </li> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://www.spacew.com/gallery/image005746-thumb.jpg" alt=""> </a> </li> </ul> </div> </div> <div class="row"> <div class="span12 offset1"> <div class="span3"> <h2 class="white">.</h2> <p class="white">.</p> <p><a class="btn" href="http://stackoverflow.com/questions/14070304/#">View details »</a></p> </div> <div class="span3 offset1"> <h2 class="white">.</h2> <p class="white">.</p> <p><a class="btn" href="http://stackoverflow.com/questions/14070304/#">View details »</a></p> </div> <div class="span3 offset1"> <h2 class="white">.</h2> <p class="white">.</p> <p><a class="btn" href="http://stackoverflow.com/questions/14070304/#">View details »</a></p> </div> </div> </div> <div class="row"> <div class="span11 offset1"> <ul class="thumbnails padding"> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://www.spacew.com/gallery/image005746-thumb.jpg" alt=""> </a> </li> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://www.noaanews.noaa.gov/stories2005/images/katrina-noaa-p3-view-08-28-2005c.jpg" alt=""> </a> </li> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://timesofindia.indiatimes.com/photo/14025462.cms" alt=""> </a> </li> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://www.richweb.f9.co.uk/astro/images/Moon.00004030.gif" alt=""> </a> </li> <li class="span2"> <a href="http://stackoverflow.com/questions/14070304/#" class="thumbnail"> <img src="http://www.spacew.com/gallery/image005746-thumb.jpg" alt=""> </a> </ul> </div> </div> <hr> <footer> <p class="white centered-text">© Company 2012</p> </footer> </div> <!-- /container --> <script src="http://stackoverflow.com//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="http://stackoverflow.com/questions/14070304/js/vendor/jquery-1.8.3.min.js"><\/script>')</script> <script src="http://stackoverflow.com/questions/14070304/js/vendor/bootstrap.min.js"></script> <script src="http://stackoverflow.com/questions/14070304/js/plugins.js"></script> <script src="http://stackoverflow.com/questions/14070304/js/main.js"></script> <script> var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; g.src=http://stackoverflow.com/questions/14070304/('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; s.parentNode.insertBefore(g,s)}(document,'script')); </script> </body></html>?\[/code\]
bootstrap twitter
- Thread starter BILL4
- Start date