Bootstrap 3 column layout with minimal additional div/row markup

HTML & CSS
1

Dear all, I would like to have a 3 column layout, and semantically my markup makes sense from a content point of view:

<!-- 1. main-->
<div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
  <div class="product"></div>
</div>
<!-- 2. side bar -->
<div>
</div>
<!-- 3. other info -->
<div>
</div>

I am looking to style the above layout of the main column containing a sub 2 column layout of products, and the sidebar, so it would like like 3 columns, with the products stacked 2 wide in the main div.

I have created some bootstrap code and have the following questions please:

  1. When the below code is ran, why is the other div at the end offset to the left and how do i fix this?
  2. Ideally i want to keep the html as clean as possible (not adding arbitrary rows/columns) but what is the cleanest way to make the product divs stack side by side 2-wide (equal width each), and collapse on top of one another when the browser width reduces?

Code is below

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Untitled 1</title>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <style type="text/css">

    div {
    border: 1px solid blue;
    }

    </style>
</head>

<body>
    <div class='container'>
        <h1></h1>
        <div class='navbar navbar-inverse'>
          <div class='navbar-inner nav-collapse' style="height: auto;">
            <ul class="nav">
            </ul>
          </div>
        </div>
        <div id='content' class='row-fluid'>
            <div id='main' class='span9'>
                <h2>Main</h2>
                <div class="product">
                    <p>Item 1</p>
                </div>
                <div class="product">
                    <p>Item 2</p>
                </div>
                <div class="product">
                    <p>Item 3</p>
                </div>
                <div class="product">
                    <p>Item 4</p>
                </div>
            </div>
            <div id='sidebar' class='span3'>
                <h2>Side</h2>
            </div>
            <div id='other' class="row">
                <div class="span12">
                    <p>other details here</p>
                </div>
            </div>
        </div>
  </div>
</body>

</html>
2

Hi,

I know very little of bootstrap but if you are going to use it them you must keep to the organisational structure that it demands. You can’t create arbitrary structures and ignore their pre-defined constructs as it has been created to work in a logical way. It looks as though each row should add up to 12 in your example so you would need to finish the previous row and start a new fluid row.

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled 1</title>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style type="text/css">
div { border: 1px solid blue; }
</style>
</head>

<body>
<div class='container'>
		<h1></h1>
		<div class='navbar navbar-inverse'>
				<div class='navbar-inner nav-collapse' style="height: auto;">
						<ul class="nav">
						</ul>
				</div>
		</div>
		<div id='content' class='row-fluid'>
				<div id='main' class='span9'>
						<h2>Main</h2>
						<div class="product">
								<p>Item 1</p>
						</div>
						<div class="product">
								<p>Item 2</p>
						</div>
						<div class="product">
								<p>Item 3</p>
						</div>
						<div class="product">
								<p>Item 4</p>
						</div>
				</div>
				<div id='sidebar' class='span3'>
						<h2>Side</h2>
				</div>
		</div>
		<div id='other' class="row-fluid">
				<div class="span12">
						<p>other details here</p>
				</div>
		</div>
</div>
</body>
</html>

The same goes for any inner columns and you would need to construct them as dictated by the documentation. Use rows and span classes as directed to split the row into columns. There are negative margins set on certain elements to offset the space of the column alignment so you need to follow the directions to the letter and use the elements and classes as directed. (I believe the first row is offset 20px to the left to offset the first span class which has a margin-left of 20px.)

As an aside I still fail to see the usefulness of this bootstrap code as in the time its taken me to look at your code I could have written a lean three column layout from scratch anyway! But maybe that’s just me.