How to write own bootstrap style

Question

This li not alignment correctly for 768×1024(tab) reamining size and all not working correctly,only it will work on 1280×600 and 320×480,How to write own bootstrap style,i don't know how to start anyone tell me...

<li class="col-md-3 col-sm-6 col-xs-12 isotope-item websites">
    <div class="image-gallery-item">
        <span class="thumb-info" id='thump-info'>

        <div class="my-gallery" itemscope itemtype="">
            <?php 
            $i = 0;
            $sql=mysql_query("SELECT * FROM useralbum WHERE ssmid='$ssmid' ORDER BY photo_uploadedon DESC");
            $count = mysql_num_rows($sql);
            while($row=mysql_fetch_assoc($sql)){
            ?>
            <figure <?php if(0 != $i) { ?>style="display:none;" <?php } ?>>
              <a href="http://www.srisankaramatrimony.com/cupid/img/user-album/thumbnail/<?php echo $row['thumbnail']?>" itemprop="contentUrl" data-size="1600x1600">
                  <img src="http://www.srisankaramatrimony.com/cupid/img/user-album/thumbnail/<?php echo $row['thumbnail']?>" itemprop="thumbnail" alt="Image description" style='dispaly:none'/>
              </a>
            </figure>
            <?php $i++; } ?>
        </div>
        <span class="thumb-info-title">
            <span class="thumb-info-inner">VIEW PHOTOS</span>
            <span class="thumb-info-type"><?php echo $count.'  PHOTOS'?></span>
        </span>
        <span class="thumb-info-action">
            <span class="thumb-info-action-icon"><i class="fa fa-link"></i></span>
        </span>

        </span>
    </div>
    </li>
[THis one for 800×1280 ,see the forth image width is not comming corectly]


 https://i.stack.imgur.com/ouSop.png