I'm trying to create a bootstrap based timetable, and I want it to be responsive across devices but it's a little harder than I though.
On larger devices, the layout should be the following with 3 parallel sessions, but the hour slots align with each other across columns:
This will differ from the mobile view where the columns sit below each other and the horizontal alignment is ignored:
I did try to use a table in each column but quickly realise that idea was flawed. Various other attempts to make the columns the same height have also failed.
The bigger problem is that the content for each cell can vary, massively.
Have you tried nesting columns? You could put a single row of three columns, and then nest other divs inside of those columns. Here's a Bootply. You can see that the columns stack in mobile. Here's the code, it's relatively straightforward:
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-left"></div>
<div class="col-xs-12 col-left"></div>
<div class="col-xs-12 col-left"></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-mid"></div>
<div class="col-xs-12 col-mid"></div>
<div class="col-xs-12 col-mid"></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-right"></div>
<div class="col-xs-12 col-right"></div>
<div class="col-xs-12 col-right"></div>
</div>
</div>
</div>
UPDATED to accommodate the white blocks. In a large display you can see that I've just used CSS to make the empty blocks white, and when you view it in mobile, those blocks are hidden. Here's the updated Bootply, and here's the code.
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-left"></div>
<div class="col-xs-12 col-mid visible-lg" id="white"></div>
<div class="col-xs-12 col-left"></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-mid visible-lg" id="white"></div>
<div class="col-xs-12 col-mid"></div>
<div class="col-xs-12 col-mid visible-lg" id="white"></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-xs-12 col-top"></div>
<div class="col-xs-12 col-topright"></div>
<div class="col-xs-12 col-bottomright"></div>
</div>
</div>
</div>
Related
I have a section which looks like this:
The fields Budget and Status should be more on the right side, but I don't know how to achieve this without breaking it. The issue doesn't appear in JSFiddle: https://jsfiddle.net/om6jd4pn/
I tried putting the text to the right using padding-left:20em; in CSS and this HTML, but it's breaking after the first letter.
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-sm-3 col-md-3 col-lg-4">
<span class="bsprojectGroupTitle" id="indentBudget">Budget</span>
</div>
<div class="col-sm-12 col-md-9" id="projectBudget">
</div>
</div>
</div>
<div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="row">
<div class="col-sm-6 col-md-3">
<span id="indentStatus">Status </span>
</div>
<div id="bsprojectProjectPhaseLine">
</div>
</div>
</div>
Any help is appreciated!
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 two rows of three columns that I have set up with Twitter Bootstrap like so:
<div class="row">
<div class="col-md-4">
Some Stuff
</div>
<div class="col-md-4">
Some more stuff
</div>
<div class="col-md-4">
Even more stuff
</div>
</div>
<div class="row">
<div class="col-md-4">
Some Stuff
</div>
<div class="col-md-4">
Some more stuff
</div>
<div class="col-md-4">
Even more stuff
</div>
</div>
This works fine for a certain pixel width (two rows of three nice columns), but when I reduce the screen size, it has 2 in one row, and then 1 on another row (for 1 row). And then when an iPhone screen size they are each in their own row, but they are off center.
How do I make it so that these rows are responsive so that, when the screen size is reduced, 2 columns are displayed as 50% of the container width? And then when the screen is reduced to a phone device width, each column takes up 100% of the container width.
See Example:
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>
Please try this,
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
<div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>
use phone size css instead of desktop so it will remain same on all screen sizes.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-4">
Some Stuff
</div>
<div class="col-xs-4">
Some more stuff
</div>
<div class="col-xs-4">
Even more stuff
</div>
</div>
<div class="row">
<div class="col-xs-4">
Some Stuff
</div>
<div class="col-xs-4">
Some more stuff
</div>
<div class="col-xs-4">
Even more stuff
</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 don't know if my approach makes sense, however, I need to achieve a layout like this picture:
Now, I'm writing just a single <div class="row"></div> and representing each area with a column inside of it, e.g. <div class="col-sm-4></div>.
Without the yellow area, this works fine:
<div class="row">
<div class="col-sm-4 col-sm-push-8">green</div>
<div class="col-sm-4 col-sm-pull-4">red</div>
<div class="col-sm-4 col-sm-pull-4">blue</div>
</div>
How can I add the yellow area? There's no col-pull-16 or things like that, what's the way to go?
Thank you.
you need to check the Flexbox and sepcially the order property (http://css-tricks.com/snippets/css/a-guide-to-flexbox/)
Have a look at this. Hope it helps.
<div class="row">
<div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
RED
</div>
<div class="hidden-xs col-sm-4 col-md-4 col-lg-4">
BLUE
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4">
Green
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 navbar-fixed-bottom">
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
Red
</div>
</div>
<div class="row">
<div class="col-xs-12 hidden-sm hidden-md hidden-lg">
BLUE
</div>
</div>
</div>
</div>
JSFIDDLE
http://jsfiddle.net/68n54p47/2/