I have a sidebar which is col-md-2. now I need to put 4 thumbnail next to each other on this sidebar that picture of them would be responsive. whith this code image become bigger when I resize the window (make window smaller)
<div class=col-md-2>
<div class=row>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div class=col-md-3>
<div class="thumbnail>
<a href="#">
<img srcset="address" class="img-responsive">
<div class="caption">
a
</div>
</a>
</div>
</div>
<div><!--end of row>
<div>
Related
how to align them in a row with equal height.
<div id="about-page-contain">
<div class="">
<div class="row equal">
<div class="wwd">
<div class="col-md-12">
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/plots">
<img src="/public/uploadfiles/images/be71f72e-b2e6-4dab-8dd4-8bc4d48365b8.jpg" alt="PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="/public/uploadfiles/images/ff74dcc3-71b4-4d35-b53b-77c6c36a0947.jpg" alt="FLATS" style="">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/farm-land">
<img src="/public/uploadfiles/images/06fdde52-b169-45eb-a96a-ec1dd07f15e5.jpg" alt="FARM LAND" style="">
<div class="caption" style="text-align:center;">
<p>FARM LAND</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-sites">
<img src="/public/uploadfiles/images/45d18935-9220-41ed-8f58-4aa3a16be8a8.jpg" alt="DEVELOPMENT SITES" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT SITES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/development-lands-for-plots">
<img src="/public/uploadfiles/images/d85c0a59-2d35-4f24-830b-8cfe606f8caf.png" alt="DEVELOPMENT LANDS FOR PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>DEVELOPMENT LANDS FOR PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-houses">
<img src="/public/uploadfiles/images/5d265aad-31ef-4285-94a3-3aaeb0111e7a.jpg" alt="INDEPENDENT HOUSES" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT HOUSES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/outrate-lands-for-appt-&-plots">
<img src="/public/uploadfiles/images/8d3cfcec-5415-422c-8426-665271216009.jpg" alt="OUTRATE LANDS FOR APPT & PLOTS" style="">
<div class="caption" style="text-align:center;">
<p>OUTRATE LANDS FOR APPT & PLOTS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/commercial-properties">
<img src="/public/uploadfiles/images/707cc088-4383-4423-8172-2fb2d9efa46d.jpg" alt="COMMERCIAL PROPERTIES" style="">
<div class="caption" style="text-align:center;">
<p>COMMERCIAL PROPERTIES</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/independent-villas-in-prime-locations">
<img src="/public/uploadfiles/images/c2a9b09c-94bd-43ee-92ae-db4c587dd8eb.jpg" alt="INDEPENDENT VILLAS IN PRIME LOCATIONS" style="">
<div class="caption" style="text-align:center;">
<p>INDEPENDENT VILLAS IN PRIME LOCATIONS</p>
</div>
</a>
</div>
</div>
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/construction-contract">
<img src="/public/uploadfiles/images/5f253c56-7f4d-4e61-9359-f5b2f7748443.jpg" alt="CONSTRUCTION CONTRACT" style="">
<div class="caption" style="text-align:center;">
<p>CONSTRUCTION CONTRACT</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
There are a few issues here:
You have a class of wwd that we cannot see. Is that applying some styles of some sort?
Each image has a blank style="" class. Why is that there?
If I remove the link to the bootstrap styles I do not see any difference in applied styles.
the image sizes of your images can affect the layout and there are no actual links to the image so it makes it difficult to reproduce. Include the full links in your example to make it easier to reproduce.
I created a codepen with a fake image but I don't see the issue you are seeing.
<div class="col-md-2">
<div class="thumbnail">
<a href="hyderabad/flats">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt="DEVELOPMENT SITES" style="" width="100px">
<div class="caption" style="text-align:center;">
<p>FLATS</p>
</div>
</a>
</div>
</div>
How about this example?
<div class = "row">
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
<div class = "col-sm-6 col-md-3">
<a href = "#" class = "thumbnail">
<img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.r9MVqtg3zlXjdKLjkrZ04QHaE8%26pid%3DApi&f=1" alt = "Generic placeholder thumbnail" width="100px">
</a>
</div>
</div>
How to make carousel items navigate as a group with bootstrap 3? Rather than moving items one at a time how can we make the multiple items move at a click. For e.g. If i see slides 1,2,3 the next carousel control should display slides 4,5,6.
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3"><img src="images\link4\Picture1.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture5.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture2.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture4.png" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-3"><img src="images\link4\Picture3.png" class="img-responsive"></div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script>
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
for (var i=0;i<2;i++) {
next = next.next();
if (next.length>0) {
next.children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
} }
});
</script>
There's no need for the extra JS. Just use the standard Bootstrap carousel...
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
<div class="item">
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
<div class="col-xs-3">
<img src="//placehold.it/400" class="img-responsive">
</div>
</div>
</div>
http://www.codeply.com/go/Vnvl4HqgKJ
I have a footer where in section, I need it to be seperated into 4 parts. 2 up and 2 down. How to do this? I have attached the code. I have attached the image on how i wanted it.
Click to see Image
<div className="footer">
<div className="row full-width">
<div className="large-6 columns">
<div className="row">
<div className="small-12 medium-3 large-4 columns">
<img className="" src="" alt="logo"/>
<div className="contact-info">
<p className="address">address</p>
<p className="email">mail</p>
<p className="tele">53343</p>
</div>
</div>
<div className="small-6 medium-3 large-8 columns">
<div className="row">
<ul className="list-unstyled ">
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Fast Shipping</p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Free Return</p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Price Gurantee </p>
</li>
<li className=".large-6 columns">
<img className="" src="img/transport-icon.jpg" alt="transport-icon"/>
<p className="text-uppercase">Online Support</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div className="large-6 columns">
<div className="row">
</div>
</div>
</div>
</div>
Thanks
you should remove all the className properties from your elements and just use class. as noted in the Docs, the grid of foundation works with <div class=""> elements so you're code messes up things a bit.
read more here: http://foundation.zurb.com/sites/docs/grid.html#basics
and a scheme of the footer would be like:
<div class="row footer">
<div class="small-6 columns">
<img src="...">
<p>some text</p>
</div>
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
<div class="small-6 columns">...</div>
</div><!-- end of row -->
I have tried every way to imitate this look in style and columns and just cannot get it with Bootstrap 3.
Can someone list the twitter bootstrap markup for this:
http://postimg.org/image/ftbd0fxtv/
I have been stuck for may days now.
I have tried the following:
<div class="container">
<div class="row">
<div class="col-md-8"></div>
<div class ="col-md-4"></div>
</div>
</div>
thanks
demo: http://www.bootply.com/BCsPapR7Ww
html:
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="page-header">
<h1>Example page header<br><small>Subtext for header</small></h1>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-4">Menu option 1</div>
<div class="col-sm-4">Menu option 2</div>
<div class="col-sm-4">Menu option 3</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div> <div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="http://placekitten.com/g/600/600">
</a>
</div>
</div>
</div>
<nav class="text-center">
<ul class="pagination">
<li class="disabled"><span aria-hidden="true">«</span><span class="sr-only">Previous</span></li>
<li class="active">1 <span class="sr-only">(current)</span></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li><span aria-hidden="true">»</span><span class="sr-only">Next</span></li>
</ul>
</nav>
<footer class="container">
<div class="row">
<div class="text-center">link 1 | link 2</div>
<div class="text-center">Powered by Bootstrap</div>
</div>
</footer>
I am building my first site with bootstrap. it is going pretty good so far.
The only problem I haven't been able to fix is:
The bootstrap carousel is sliding to far. I have 3 items in carousel each has 5 pictures.
If I press the back button repeatedly (doesn't mather how many times), the carousel cycles trough the 3 items no problem.
but if I press the next button repeatedlly, after the third times it does not reset to 0.
What could be causing this?
<div class="row">
<div class="col-sm-12 thumb_box">
<div class="thumbs">
<div class="well">
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<div class="item">
<div class="row thumb_row">
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb1.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
<div class="col-sm-2">
<div class="thumb">
<img src="~/img/folio_thumb2.png">
<a href="#" class="mask">
<div class="more">+</div>
</a>
</div>
</div>
</div>
<!--/row-->
</div>
<!--/carousel-inner-->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<!--/myCarousel-->
</div>
<!--/well-->
</div>
I found the problem.
If you are having this problem check your div elements.
Something was wrong in my hierarchy of divs.