You now have a sidebar on the page, but with nothing in it, so they look shrunken.
You are using <ul> and <li> tags for the spans. Is there any particular reason? It would seem to complicate matters.
You are also using inline styles, which you really shouldn’t. Untangling things later will be more difficult. If you wanted to make all the titles red, for instance, you would have to change them all. instead you should use classes.
Paste the following into a blank WordPress page and have a play around:
<style>
.my-bootstrap-grid [class*="span"] {
background-color: #eee;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
min-height: 20px;
line-height: 20px;
border: 2px solid #ccc;
margin-top: 0px;
margin-bottom: 20px;
}
.my-bootstrap-grid [class*="span"]:hover {
background-color: #ddd;
}
.my-bootstrap-grid [class*="span"] [class*="span"] {
background-color: #ccc;
}
.my-product-title {
font-weight: 600;
font-size: 1.3em;
line-height: 2em;
}
</style>
<h3>3 x span4 example:</h3>
<p>This example shows how to add 3 separate grid elements. When they "flow" on smaller screens, each element will stack on top of the others equally.</p>
<div class="row-fluid my-bootstrap-grid">
<div class="span4">
<p class="my-product-title">Product detail</p>
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
<div class="span4">
<p class="my-product-title">Product detail</p>
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
<div class="span4">
<p class="my-product-title">Product detail</p>
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
</div>
<div class="row-fluid my-bootstrap-grid">
<div class="span4">
<p class="my-product-title">Product detail</p>
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
<div class="span4">
<p class="my-product-title">Product detail</p>
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
<div class="span4">
<p class="my-product-title">Product detail</p>
<p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p><a class="btn btn-success" href="#">Buy Now</a> <a class="btn btn-warning" href="#">More Details</a></p>
</div>
</div>
<p><strong>A note about the shading:</strong> The shading is added for illustration purposes. However, you may wish to leave it in if you want to group items on the page. To do this, remove all the CSS inside the style tags above and place them in your child theme's style.css, or in the Custom CSS panel of Customiz'it.</p>
See the note about the CSS styles. While you’re playing with the page, you can put them in the page. But when you go live, you should move them to a stylesheet in a child theme (or delete them altogether to remove the styling.
