CODEWITHSUNDEEP
phpcsstwitter-bootstrapimage-gallery
Ramaraju.d
Ramaraju.d

Reputation: 1353

creating image gallery with Twitter Bootstrap

I am trying to create a Very simple and basic Image gallery using Twitter Bootstrap responsive design.

The images are rendered dynamically. The first row of images are adjusting good but from second row the alignment varies.

Here is my code 

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery</title> 
<link href="<?=base_url()?>assets/css/bootstrap.css" rel="stylesheet"> 
<link href="<?=base_url()?>assets/css/bootstrap-responsive.css" rel="stylesheet">
<style>

</style>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
    <div class = "span12">
    <?php
    for($i=0; $i<10 ;$i++)
    {
    ?>              
    <div class = "span3">
    <a href="#" class="thumbnail">
            <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style = "border:solid 2px red;"/>
    </a>
    </div>

    <?php
    }
    ?>
    </div>                  
</div>
</div>


</body>
</html>

How can I align the span's exactly, so that it looks like a perfect gallery like structure.

I don't want to use any plugin here or jQuery.

Upvotes: 0

Views: 777

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

Use a row instead of row-fluid..

<div class="container">
    <div class="row">

    <div class="span3">
    <a href="#" class="thumbnail">
        <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" alt="sample" style="border:solid 2px red;">
    </a>
    </div>
   ...
    </div>
</div>

Demo: http://bootply.com/69509

Upvotes: 1

Pascamel
Pascamel

Reputation: 953

Did you try to add a new <div class="row-fluid"> ... </div> every four images ?

Upvotes: 1

Related Questions