I am trying to give break within div in html but i didn't get the solution please help me to find the solution here is my html code
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-9">
<h5>      Apartments</h5>
<hr>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0258.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8050.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0516.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8055.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0344.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8062.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7784.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8073.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0501.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8082.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0213.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8104.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0334.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8393.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0466.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8473.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0406.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8498.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0329.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0138.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7890.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0128.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0123.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0068.jpg');?>"></a></div>
<br/>
<h5>      Testimonials</h5>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
i want h5 tag in next line but when i load the page then it show to the next of the images
<h5>      Testimonials</h5>
please help me to find the solution
Wrap all your col-* divs
inside a div
with class - row
. Also you can make use of class text-center
class
available in twitter bootstrap
framework instead of adding
to h5
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="col-md-9"> <h5 class="text-center">Apartments</h5> <hr> <div class="row"> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0258.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8050.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0516.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8055.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0344.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8062.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7784.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8073.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0501.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8082.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0213.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8104.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0334.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8393.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0466.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8473.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0406.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8498.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0329.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0138.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7890.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0128.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0123.jpg');?>"></a> </div> <div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0068.jpg');?>"></a> </div> <br/> </div> <h5 class="text-center">Testimonials</h5> </div> <div class="col-md-3"> </div> </div> </div> </div>
The simple solution is put the images div in class row div and then provide the
Example
HTML CODE
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-9">
<h5>Apartments</h5>
<hr>
<div class="row">
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0258.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8050.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0516.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8055.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0344.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8062.jpg');?>"></a></div>
<br/>
</div>
<h5>Testimonials</h5>
</div>
<div class="col-md-3">
</div>
</div>
</div>
</div>
Simple solution is that you enclose the images in a row class and the h5 in a another row class.
This is create 2 rows inside class col-md-9
,as shown below.
HTML CODE:
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-9">
<div class="row">
<h5>      Apartments</h5>
<hr>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0258.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8050.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0516.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8055.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0344.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8062.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7784.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8073.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0501.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8082.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0213.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8104.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0334.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8393.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0466.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8473.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0406.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_8498.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0329.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0138.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_7890.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0128.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0123.jpg');?>"></a></div>
<div class="col-lg-4 col-sm-4 col-xs-6"><a class="fancybox" title="Image 1" href="<?php echo base_url('assets/img/amen_LALCO_0295.jpg');?>"><img class="thumbnail img-responsive" src="<?php echo base_url('assets/img/gallery/LALCO_0068.jpg');?>"></a></div>
</div>
<div class="row">
<h5>      Testimonials</h5>
</div>
</div>
<div class="col-md-3">
</div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.