I am having trouble with rows and columns in Twitter Bootstrap 3. I got 5 images, which are set in 2 rows (3 in 1st row and 2 in 2nd one). They are set as col-lg-4 (3 images in a row).
<div class="row pad3">
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/logodtll.png" alt="" />
</a>
</div>
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/sclogonew.png" alt="" />
</a>
</div>
<div class="col-lg-4 desctext">
<a href="#">
<img class="imgmargin" src="css/img/biclogonew.png" alt="" />
</a>
</div>
</div>
<div class="row pad3">
<div class="col-lg-4 col-xs-12 desctext">
<a href="#">
<img class="imgmargin" src="css/img/adrislogo2.png" alt="" />
</a>
</div>
<div class="col-lg-4 col-xs-12 desctext">
<a href="#demo">
<img class="imgmargin" src="css/img/collection2.png" alt="" />
</a>
</div>
</div>
I want to achieve that when I reduce my window size, those columns become medium (col-md-6) and the 3rd one "spills" over into the next row. Kinda like on large screen its 3 and 2, on medium its 2-2-1. How do I achieve this? I dont know what to do with my 3rd column because he is still part of the 1st row. Is this done with media queries?
In short, when screen is large i want to have 3 images in a row, when its medium i want to have 2 images in a row and anything less than that its 1 image per row.
Thanks
The dividing row is preventing the columns from wrapping ("spillover"). Try this..
<div class="row pad3">
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/logodtll.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/sclogonew.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/biclogonew.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#">
<img class="imgmargin" src="css/img/adrislogo2.png" alt="">
</a>
</div>
<div class="col-lg-4 col-md-6 desctext">
<a href="#demo">
<img class="imgmargin" src="css/img/collection2.png" alt="">
</a>
</div>
</div>
Demo: http://bootply.com/93649
Also see: Bootstrap 3 - Use more than 12 columns in a row
Related
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>
I am asking that i have added carousel-indicators by using Bootstrap3.and my carousel-indicator looking like rectangle shape.
I have wrote the code as i given below.
<div class="item active">
<img src="image/1.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/2.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/3.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/4.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/5.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/6.jpg" class="img-responsive">
</div>
<div class="item">
<img src="image/7.jpg" class="img-responsive">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!--closing carousel-->
And I Wanted my Carousel-indicator look like smaller dot.
you can draw SVG figures to use for your carousel controls, you can add an event listener to literally anything to control your carousel.
<circle cx="25" cy="75" r="20"/> Play around with the size of it, you can assign it color or other attributes as you would any other HTML element.
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 using Bootstrap 3. I have one row that will hold a variable amount of columns, ranging from 1-let's say 9.
The are currently set to col-lg-4, so three should display on one row. I would normally create a new row, but since I am dynamically adding columns, I cannot do this, or at least do no know how.
When my client adds a post, it automatically creates a column with content.
The problem lies only in Firefox & IE, in both desktop and mobile views. The 4th item (or 1st item that should go to the next row) gets pushed to a new line and is offset. See screenshot below.
I am using ExpressionEngine as my CMS.
It displays perfectly in Chrome.
Code Below
<div class="container">
<div class="row">
{exp:channel:entries channel="plans" orderby="title" sort="asc"}
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 centered">
<div class="grid mask">
<figure>
<img class="img-responsive" src="{plan_main_image}">
<figcaption>
<h5>{title}</h5>
<a data-toggle="modal" href="#{url_title}" class="btn btn-primary btn-lg">View Floor Plan</a>
</figcaption>
</figure>
</div>
</div>
<div class="modal fade" id="{url_title}" tabindex="-1" role="dialog" aria-labelledby="{url_title}" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">{title}</h4>
</div>
<div class="modal-body text-left">
<div class="row">
<div class='list-group gallery'>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_main_image}">
<img class="img-responsive" alt="" src="{plan_main_image}" />
</a>
</div>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_first_level}">
<img class="img-responsive" alt="" src="{plan_first_level}" />
</a>
</div>
<div class="col-lg-4">
<a class="thumbnail fancybox-effects-d" data-fancybox-group="" href="{plan_second_level}">
<img class="img-responsive" alt="" src="{plan_second_level}" />
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
{plan_description}
</div>
</div>
<!--<div class="row">
<div class="col-lg-12">
<b>Download the floor plan</b>
</div>
</div>-->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{/exp:channel:entries}
</div><!-- /row -->
<br>
<br>
</div><!-- /row -->
</div><!-- /container -->
Thanks
The reason for this is because the first image is slightly taller than the other images. You need to use a responsive column reset for this. See Responsive Column Resets in the doc.
The basic concept is to add a div after the each horizontal grouping that contains a clearfix so that the next horizontal grouping is cleared before and aligns correctly.
For more complex scenarios you can see my answer here: Gap in Bootstrap stacked rows.
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.