Bootstrap row won't break up

Profile picture for Matthew Wilson
Matthew Wilson

I am trying to have it so the row breaks up when it reaches the bottom of the div box however, it isn't doing it. I am using Bootstrap 3.

    <div class="col-md-10 column" id="main">
		<h3>
		  Gallery
		</h3>
			<div class="container-fluid">
				<div class="row-fluid">
					<ul> 
						<li class="span4"><img src="img/thumbs/6.jpg" alt=""</li>
						<li class="span4"><img src="img/thumbs/7.jpg" alt=""</li>
						<li class="span4"><img src="img/thumbs/8.jpg" alt=""</li>
						<li class="span4"><img src="img/thumbs/9.jpg" alt=""</li>
						<li class="span4"><img src="img/thumbs/11.jpg" alt=""</li>
						<li class="span4"><img src="img/thumbs/12.jpg" alt=""</li>
						<li class="span4"><img src="img/thumbs/19.jpg" alt=""</li>
						<li class="span4"><img src="img/thumbs/20.jpg" alt=""</li>
				
				</div>
			</div>
		

	</div>

I'd look at the Documentation for the Bootstrap 3 grid and really work through some of the examples to make sure you understand that.

Here is a runnable snippet of your current markup:

<!-- begin snippet: js hide: false console: false babel: false --> <!-- language: lang-html --> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row-fluid">
    <ul> 
      <li class="span4"><img src="https://picsum.photos/200/200?image=1" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=2" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=3" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=4" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=5" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=6" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=7" alt=""/></li>
      <li class="span4"><img src="https://picsum.photos/200/200?image=8" alt=""/></li>
      </ul>
  </div> 
</div>
<!-- end snippet -->

If you just want each of the images to take up 4 out of 12 columns at all screen sizes you can use .col-xs-4, but without more info as to what you're expecting to achieve, it would be hard to say for sure what you need to do.

<!-- begin snippet: js hide: false console: false babel: false --> <!-- language: lang-html --> 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=1" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=2" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=3" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=4" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=5" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=6" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=7" alt=""/></div>
    <div class="col-xs-4"><img src="https://picsum.photos/200/200?image=8" alt=""/></div>
  </div> 
</div>
<!-- end snippet -->