I have a row with three columns.
First one is size 1 offset 0,
Second one is size 6 offset 1
last one is size 1 offset 8
What expect to get is the following:
[Col1][Col2 ][Col3]
but instead I get:
[Col1][Col2 ]
[Col3]
Here is my html:
<div class="list-group">
<a href="#" class="list-group-item itemlisting">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1">
<img src="http://blog.bleepie.com/images/2010/05/week-16-logo-post-to-facebook/logo.png" class="img-rounded imglogo hidden-xs">
</div>
<div class="col-lg-6 col-lg-offset-1 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-8 col-xs-offset-1 middleColumn">
<h4>Software Developer</h4>
<p>Shell Corporation</p>
</div>
<div class="col-lg-1 col-lg-offset-8 col-md-1 col-md-offset-8">
<p>Calgary</p>
</div>
</div>
</a>
</div>
This happens when I resize my screen to a width greater than 991px. I've been trying to play around with the offset and the column widths but I've had little luck with aligning everything correctly. Any help would be appreciated.
cols - including offset cols - need to add up to 12. Your lg col set is adding up to 19. Switching the last col-lg-offset from 8 to 1 cleared the problem. See http://bootply.com/79908 or the code below.
<div class="list-group">
<a href="#" class="list-group-item itemlisting">
<div class="row">
<div class="col-lg-1 col-md-1 col-sm-1">
<img src="http://blog.bleepie.com/images/2010/05/week-16-logo-post-to-facebook/logo.png" class="img-rounded imglogo hidden-xs">
</div>
<div class="col-lg-1 col-lg-offset-8 col-md-6 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-8 col-xs-offset-1">
<h4>Software Developer</h4>
<p>Shell Corporation</p>
</div>
<div class="col-lg-1 col-lg-offset-1 col-md-1 col-md-offset-8">
<p>Calgary</p>
</div>
</div>
</a>
</div>
PS - inline elements should not contain block elements, so wrapping all of those divs with an <a> goes against the spec. I don't think any browser will complain, it is just bad form.
PPS - I didn't bother to fix any of your md, sm, or xs cols either, so be sure to take a look at those and make sure you are staying =12 cols.
You don't the offset classes in 2nd and 3rd divs. The content before these divs offsets it already.
Related
On my website www.asistaliavalencia.com, on the main page, I have a button bar. I would like to be able to arrange them so that they are all in the same row.
What html code can I add?
<div class="boxes-home">
**<section class="container">
<div class="row no-margin-negative justify-content-center">
<div class="col-sm-6 col-md-3 text-center pt-20-mb">**
<a href="https://asistaliavalencia.com/cuidadora-ancianos-valencia-por-horas/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-1.png">
<p>Cuidadora de mayores por horas</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/cuidadora-de-ancianos-interna-en-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-2.png">
<p>Cuidadora de mayores interna</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/servicio-acompanamiento-en-hospitales-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-3.png">
<p>Servicio de acompañamiento en hospitales</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/servicios-quiropracticos-ancianos-valencia/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-4.png">
<p>Servicios quiroprácticos</p>
</div>
</a>
</div>
<div class="col-sm-6 col-md-3 text-center">
<a href="https://asistaliavalencia.com/adaptacion-reforma-vivienda/">
<div class="box-home">
<img src="https://asistaliavalencia.com/wp-content/uploads/2020/09/icon-home-4.png">
<p>Adaptación y reforma de la vivienda</p>
</div>
</a>
</div>
</div>
</section>
</div>
You can see here an image of my problem
bootstrap row can only consist of 12 "col"s, you have 5 elements with size 3, you need to change all col-3 to col-2 and they will fit the row
or you can delete all size used from bootstrap and set sizes via % values of width attribute
Reduce the gap by playing with first from...
<div class="col-sm-6 col-md-3 text-center">
to
<div class="col-sm-2 col-md-1 text-center">
Keep playing with the spacing. Possibly do for last two before adjusting all.
Also add a "width:225px" to
.boxes-home .box-home {
width:225px
}
in .css file.
Instead of the col-md-3 class for those divs, use col-md-2 for all of them, and add col-md-offset-1 only to the first of those five divs.
That way the boxes will be two columns wide each, with an offset of one column for the first div (and therefore one column space after the last one), which centers those 5 boxes: 1 + 2 + 2 + 2 + 2 + 1 = 12 columns alltogether
In my post section of the web site which I am creating I have 4 columns with post in each post with different height based on it's contents . bootstrap 4 grid system. As per photo under
When I resize the 4th column re-arrange.
As u can see on the above image the 4th column is shifted under number 1 but its align base on the height of the 3rd column. I want to be stacked like the photo bellow.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row pt-3 port-folio-margins pb-5 pr-4 pl-4">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 pl-1 pr-1 ">
<div class="post-container">
<div class="post-image"> </div>
<div class="post-title">TEST2016</div>
<div class="post-share-icons"></div>
</div>
</div>
So the question is how to achieve that CSS formatting with Bootstrap or without bootstrap . I have tried putting "float" using "flex wrap" also "clearfix" without result.
Bootstrap has a built in utility for this problem you can use cards and wrap them in card columns. See the documentation here
This is a tricky issue that is often just worked around. Web-pages are much easier to code in grids, so things tend to be in columns and rows. In your example, when wrapped the row needs to be tall enough to contain your third item. That means that if the fourth item sat where you want it, it would be within the cell of the first item.
You can use something like Masonary, which I believe calculates top and left positions as you resize. Or I think you can use flex and a whole lot of wrapper divs, but that will get messy and be horrible maintenance. It's so messy I've never got it into production, either because I lost my mind trying, or hated the thought of maintaining it when it was working in just a small example.
Masonary allows a fairly simple layout
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item grid-item--height2"></div>
<div class="grid-item grid-item--height3"></div>
<div class="grid-item grid-item--height2"></div>
</div>
JSFiddle example
This question already has answers here:
Floated elements of variable height push siblings down
(3 answers)
Bootstrap row with columns of different height
(3 answers)
Closed 5 years ago.
Basically I have bunch square of twitter-bootstrap col-md-x, col-sm-x divs one after another, to create list of images. It works almost flawlesly. Except that in some cases (which I could not figure out) it wraps last item to next row and previous item floats to the right. While from my best knowledge should float:left as it is stated in code?
Also:
All blocks have same height
Migration to v4 is no on option, as I have also 200 other widgets :)
nth selector will not works as number of columns depend on screen size
I've tried adding clearfixes inside blocks, as well rebuilding this all from inline-blocks. Also tried with table-like displays to no avail. Adding .rows is not an option, as it have different number of columns for different screen resolutions.
It works same way on latest FF and Chrome.
Code with blocks emptied for cleaner view, and only last block containing actual thumbnails code:
<div class="maslosoft-gallery-thumbs">
<div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
<div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
<div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
<div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
<div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
<div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
<div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">...</div>
<div class="col-lg-6 col-md-6 col-sm-3 col-xs-6 maslosoft-gallery-thumbs-group">
<figure class="figure img-thumbnail img-margins">
<a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
title="" style="width: 50%">
<img src="https://xn--masekowski-d0b.pl/asset/get/5a55174b09b0063676204b74/w/167/h/167/p/0/IMG_0961.jpg">
<div class="img-thumbnail maslosoft-gallery-vertical-divider">
</div>
<div class="img-thumbnail maslosoft-gallery-horizontal-divider">
</div>
<div class="clearfix"></div>
</a>
<a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
title="" style="width: 50%">
<img src="https://xn--masekowski-d0b.pl/asset/get/5a55183709b006f976dac73e/w/167/h/167/p/0/IMG_0962.jpg">
<div class="img-thumbnail maslosoft-gallery-horizontal-divider">
</div>
<div class="clearfix"></div>
</a>
<a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
title="" style="width: 50%">
<img src="https://xn--masekowski-d0b.pl/asset/get/5a55173c09b006cb73792f71/w/167/h/167/p/0/IMG_0960.jpg">
<div class="img-thumbnail maslosoft-gallery-vertical-divider">
</div>
<div class="clearfix"></div>
</a>
<a class="maslosoft-gallery-image-url" href="?msg5a2edae509b0063972ebf09e.group=5a551849d0e0c30207d3bb79"
title="" style="width: 50%">
<img src="https://xn--masekowski-d0b.pl/asset/get/5a55174809b006177664196e/w/167/h/167/p/0/IMG_0954.jpg">
<div class="clearfix"></div>
</a>
<div class="clearfix"></div>
</figure>
<div class="clearfix"></div>
</div>
</div>
I don't know how to reproduce issue (to create fiddle). Issue can be seen here if You scroll to bottom.
I've also attached screenshot:
Please note that im offline for weekend and will not respond until monday.
As I can see your code in your reference link, you have to set clear css property to the columns. Just paste below css in your code:
.maslosoft-gallery-thumbs-group:nth-child(odd) {
clear: left;
}
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared)
below them. The clear property applies to both floating and
non-floating elements.
Clear CSS Documentation
I am trying to understand how to reset boostraps columns.
If I did this:
Col-md-6
Col-md-4
How would I then create a new row where the columns start back at 1 and not 11.
I don't understand where (or if) I should use clearfix
Many thanks
David
If the third col-md is greater than 2, Bootstrap makes automatically a new row, because (4 + 6 + (x > 2)) > 12. Than you don't need a clearfix.
If the third column is col-md-1 or col-md-2, you can use a clearfix to clear the current flow and set the column into a new line:
<div class="row">
<div class="col-md-4">
col-md-4
</div>
<div class="col-md-6">
col-md-6
</div>
<div class="clearfix"></div>
<!-- New row -->
<div class="col-md-2">
col-md-2
</div>
</div>
New line automatically (4 + 6 + 6 = 16) > 12:
<div class="row">
<div class="col-md-4">
col-md-4
</div>
<div class="col-md-6">
col-md-6
</div>
<div class="col-md-6">
col-md-6
</div>
</div>
Clearfix can also be used to show columns only at a specific device width, for example:
<div class="clearfix visible-xs-block">
only visible in xs and a block element
</div>
I have a grid of images set out in rows of 4 columns which I want to change to rows of two columns. I thought this would do it: col-lg-3 col-xs-2 but it doesn't.
Where am I going wrong?
Code:
.test-content{
width:100%;
height:100px;
background:lightblue;
}
<div class="row">
<div class="col-lg-3 col-xs-2">
<div class="test-content">content</div>
</div>
<div class="col-lg-3 col-xs-2">
<div class="test-content">content</div>
</div>
<!-- It's like I should have a closing div here for the first row, and open another row just for col-xs-2, but obviously I can't do this for col-lg-3 -->
<div class="col-lg-3 col-xs-2">
<div class="test-content">content</div>
</div>
<div class="col-lg-3 col-xs-2">
<div class="test-content">content</div>
</div>
</div>
Fiddle: http://jsfiddle.net/41ry7qvk/
Bootstrap is working with a grid divided in 12 parts.
col-lg-3 means its width is 3/12. So if you want 2 rows you need col-lg-6.
The same for xs:
col-xs-3 means its width is 3/12. So if you want 2 rows on xs-screen, you need col-xs-6.
The bootstrap grid system has 12 grids. So instead of col-xs-2 you should write col-xs-6 to have 2 images on a row.