I am trying to make it so on a large screen there are 4 columns, a medium screen there are 2 and on an extra small screen just 1. The large and extra small work, but I'm assuming the medium does not simply because col-6 4 times would make it 24 instead of 12 columns. Here is my code:
<div class="row">
<div class="col-xs-12 col-med-6 col-lg-3">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
</div>
<div class="col-xs-12 col-med-6 col-lg-3">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
</div>
<div class="col-xs-12 col-med-6 col-lg-3">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
</div>
<div class="col-xs-12 col-med-6 col-lg-3">
<img src="http://www.martinezcreativegroup.com/wp-content/uploads/2014/05/img-placeholder.png">
</div>
</div>
How would I be able to make this work so that the medium column only has 2 columns?
You've used wrong class for medium screen size. It should be col-md-6 instead of col-med-6
And if you declare 4 columns of col-md-6, it will rearrange the columns such that the first two (total of 12) will occupy the first row and the next two will be arranged in the second row.
Your approach is correct, you only got the medium column classname wrong, it should be: col-md-6. (Bootstrap docs)
Here you go with a solution https://jsfiddle.net/8er0e3Lh/1/
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="http://via.placeholder.com/350x15">
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="http://via.placeholder.com/350x15">
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="http://via.placeholder.com/350x15">
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
<img src="http://via.placeholder.com/350x15">
</div>
</div>
</div>
Order of class should be from lower screen to larger screen.
Hope this will help you.
It is col-md-6 not col-med-6. Please fix this class name, then it will work.
Related
I've been trying a lot of things but couldn't find the solution to my problem.
I want to align 3 different parts in a certain way for all kind of screens but col-sm and col-xs from bootstrap are not working.
I've tried this :
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
a
</div>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-6">
b
</div>
<div class="col-lg-4 col-md-4 col-sm-2 col-xs-2">
c
</div>
</div>
</div>
But it only displays on the same line for large and medium screens, not on small screens.
The only way I've found to make it work was to write col instead of col-sm-4 but if I do so, I can't manipulate the grid exactly as I would like
To solve the problem when the width is less than 576px, you should apply the col-4 style.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-4 col-sm-4 col-md-4 col-lg-4 col-xl-4">
a
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-6 col-xl-6">
b
</div>
<div class="col-4 col-sm-4 col-md-4 col-lg-2 col-xl-2">
c
</div>
</div>
</div>
Is there a way to stack a various number of divs in multiple rows when theres not enough space to show them in a single row?
So what I mean is, imagine you have 20 divs but only 5 fit in the first row. Then there should be 4 rows with 5 items.
On the other hand when we only have 3 items then there should only be one row with 3 items.
Flexbox makes this easy. Have a look here.
The Bootstrap has 12 columns per rows. You can nest columns/rows but not recommend that you nest containers.
With that being said, you can have up to 12 columns per row. To control how it is 'stacked' you classify which type of columns it belongs to. See the demo.
https://codepen.io/pkshreeman/pen/LLYZqm
Resize the window, and you will see what it does for different settings.
Hope this helps.
This is the code used in demo:
<div class="container">
<div class="row">
<div class="col-md-6"> col-md-6 </div>
<div class="col-md-6"> col-md-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
<div class="col-md-6 col-sm-6"> col-md-6 col-sm-6 </div>
</div>
<div class="row">
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
<div class="col-md-6 col-sm-2"> col-md-6 col-sm-2 </div>
</div>
<div class="row">
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
<div class="col-md-4 col-sm-6">col-md-4 col-sm-6
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
<div class="col-md-4 col-sm-2">col-md-4 col-sm-2
</div>
</div>
</div>
I have an element in Bootstrap row. The element takes different amount of columns on xs, sm, md and lg configurations of a screen. I need the element to be in the middle when it takes 12 columns. Is it possible? If so how can I do that?
For example:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
SOME TEXT
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
SOME TEXT
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4">
SOME TEXT
</div>
And if I put the row into a div which is fluid I want elements always be in the middle, but when I shrink browser to sm configuration it makes an element take 12 columns by itself and hence I have relatively to the gap on left side huge gap on right.
Oh! There I came out with the idea and it seems to work out. I just add a bit of css to a elements which take columns:
margin:0 auto;
and what the code does is actually centers the elements in their columns.
Yes, #GaneshRadhakrishnan is right, you should use bootstrap's center-text class like this:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 center-text">
SOME TEXT
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 center-text">
SOME TEXT
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 center-text">
SOME TEXT
</div>
</div>
I have a Boostrap layout that has four centred columns when the screen is large, two columns when small, and one column when extra small. This works ok except when viewed at the small screen size when the columns do not wrap how I want them to.
On a large screen it looks like:
>zzz xxx yyy aaa
On an extra small screen it looks like:
>zzz
>xxx
>yyy
>aaa
But on a small screen it looks like:
> zzz
>xxx yyy
>aaa
I need it to look like:
zzz xxx
yyy aaa
My Boostrap code is:
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-2 text-center">
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">zzz</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">xxx</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">yyy</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">aaa</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2 text-center">
</div>
</div>
Any suggestions as to how I can achieve what I want?
What you have is actually:
(empty) zzz xxx yyy aaa (empty)
Your md allows for all 6 columns in a row (2 cols each), so that works fine (offsetting the first seemingly by 2 columns due to it being empty)
Your xs makes all of them 12 columns wide so this will also seemingly work as they all stretch across (with a blank column on top and below).
Your sm is working correctly but it looks as though it is not due to the extra columns you have.
Either remove these empty divs or if you really need them do this:
<div class="row text-center">
<div class="col-xs-12 col-sm-12 col-md-2 text-center">
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">zzz</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">xxx</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">yyy</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">aaa</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-2 text-center">
</div>
</div>
[EDIT - using offsets]
If you are simply looking for offsets at the md value, this should work instead of cluttering your mark-up with empty divs.
<div class="row text-center">
<div class="col-xs-12 col-sm-6 col-md-2 col-md-offset-2">
<div class="text-center">zzz</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">xxx</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">yyy</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-2">
<div class="text-center">aaa</div>
</div>
</div>
You have a blank div. Remove that and it will work as intended.
<div class="col-xs-12 col-sm-6 col-md-2 text-center"> </div>
Class col-md-* have a minimal space. If you use min-height: 0px;, it will may help you.
<div class="col-xs-12 col-sm-6 col-md-2 text-center" style="min-height: 0px;">
I'm using Bootstrap css grid layout it works great.
I haven't found an example where it can be responsive and convert 3 columns and 2 rows into 2 columns and 3 rows.
What it does is create single column of 6 rows. I can convert even columns from 4 to 2 but how to do 3 as they are in 2 different rows?
I thought if there is solution for an even number of columns then it could be done for odd.
Try using
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
Take into consideration that you may have to think outside of the box (punny I know) on this one. It may help visualize it better if you drew out the different stages first.
Then consider you may not need rows, except the one to contain the columns. In Bootstrap extra columns will force a second or third row automatically.
http://getbootstrap.com/css/#grid-example-mixed
You have 6 total divs. Then just adjust the column class width numbers.
Now you didn't say if you wanted the three columns on a desktop-sized screen or a mobile. I'm going to assume here, for the sake of simplicity, that the 2 columns layout is a mobile layout.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
</div>
You CAN switch it up, but why put that many columns into such a small space... there could be reasons to do it that way but it's not common due to finger-width issues. However, Bootstrap is that level of flexible.
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
</div>
Edit
There are also ways to keep it centered using offsets, if you have say a 7 column layout. It just requires adjusting the width of the columns and then adding offsets to keep it centered.
http://getbootstrap.com/css/#grid-offsetting
An important thing to remember when adding an offset, is that the col width plus the offset cannot equal 12 or it will be pushed all the way to the right. It also works best when the column width is an even number (2, 4, 6, 8, or 10).
You can practice in JSfiddle or CodePen (codepen live updates in a WYSIWYG viewer).