I have a laid out structure with three columns in ZURB Foundation 5, two of which are sidebars (left & right) and the middle one is the main content area.
I've been playing around with the documentation's source ordering instructions but had some troubles.
I tried to visualise the situation so that you can understand what I want in a second.
This is the desktop view and the structure :
and this is how I want it to look like on mobile :
Does anyone know how am I gonna achieve that?
Thanks in advance.
It would be
<div class="row">
<div class="small-12 medium-6 medium-push-3 columns">Main</div>
<div class="small-12 medium-3 medium-pull-6 columns">Left Sidebar</div>
<div class="small-12 medium-3 columns">Right Sidebar</div>
</div>
The first answer needs to use medium-push-3 instead of medium-push-6 and medium-pull-6 instead of medium-pull-3.
You can use Foundation's source ordering to alter the order at different breakpoints.
Your HTML would look something like this:
<div class="row">
<div class="small-12 medium-6 medium-push-6 columns">Main</div>
<div class="small-12 medium-3 medium-pull-3 columns">Left Sidebar</div>
<div class="small-12 medium-3 columns">Right Sidebar</div>
</div>
Here's the demo.
Related
Sorry for the really confusing title. What I'm trying to do should be quite easy in theory.
I think the best way to demontrate it is by showing you an image:
1 row at the top with 2 columns, and every other column coming after that should be positioned under the second column...
Is this doable?
Thanks
That's what the "offset" classes are for. col-md-offset-1 applied to the elements in the second column (as additional class) should do what you want (for medium viewport size)
(probably you use wider columns with classes like col-md-3 that span three columns of the grid. In this case you'd need col-md-offset-3for the offset)
use col-md-offset-* class
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"><p>fixed column</p></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
for more information :
Bootstrap Grid System - Bootstrap Grid Examples -
Try HTML display : flex for such layout. For example refer below link.
https://css-tricks.com/snippets/css/a-guide-to-flexbox
Try below code snippet.
<div class="row-fluid">
<div class="span4"><div class="well">1</div></div>
<div class="span8">
<div class="row-fluid">
<div class="span6"><div class="well">2</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">3</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">4</div></div>
</div>
</div>
</div>
So I came accros this site explaining the functioning of Bootstrap and their grid layout.
Their explaining that you should use a row in a container and a col-... in a row but what I dont know and dont especially get is : Should I use two row in the same container if the col-... are managing their selves ?
I explicite : You have this ↓
<div class="container"> <!-- First Case -->
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
<div class="container"> <!-- Second Case -->
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
<div class="row">
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
It is completely different still; it is rendering the same exact way..
You can see the result there : Fiddle
So : Which way shall I prefer/use ? and Is there a difference ?
It is important to understand that .row clears the floating columns inside, which you want in case you don't have full control of the height of your contained columns.
See this updated fiddle of yours to understand why the second example you gave is the cleaner way:
https://jsfiddle.net/DTcHh/10739/
Edit: It has to be noted that using an additional row has a harsh drawback: You can no longer decide you want to see more columns next to each other in higher resolutions.
Row class can help you when you do not want make your elements free- flow in your container. Row controls the elements under it and make them keep flowing under the row container. Its a separation for elemets
Find this updated Fiddle of yours.
<div class="container">
<div class="row">
<!-- free flow under this row -->
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
<div class="col-xs-6">col-xs-6</div>
</div>
</div>
Consider the following example, the first is the intended desktop look, the second is the mobile one. (
What is your recommendation to achieve that using a common grid system w/ media queries like twitter BS or Zurb Foundation?
With Foundation I will do something like this :
<div class="row">
<div class="small-12 medium-6">
<div class="small-12">Title</div>
<div class="small-12 show-for-small">IMG</div>
<div class="small-12">Text</div>
</div>
<div class="small-6 hide-for-small">
IMG
</div>
</div>
But I have to put "IMG" twice.
I am aware of the col-md/xs/sm/lg, as well as push/pull capabilities of Bootstrap.
I have the following issue:
<div class="row">
<div class="col-md-7">
..content here..
</div>
<div class="col-md-5">
<div class="row">
<div class="col-md-12">
..content that when on responsive needs to be rendered first..
</div>
</div>
<div class="row">
..rest of the content..
</div>
</div>
</div>
Online version: http://codepen.io/anon/pen/wJijn
I want the the col-md-12 content to be pulled first when we're on small screen sizes, WITOUT the "..rest of the content.." also being pulled first.
Requirements:
dont' use position absolute
use a bootstrap way to do this
worst case scenario: use minimal extra css
if you suggest an HTML re-ordering make sure it will work
I am attaching two sketches the before/after how I want it to order to make things easier to understand. After:
Your graphics are a little hard to decipher, but I think I understand what you're going for...
DEMO http://www.bootply.com/rwwiuNalrr
<div class="row">
<div class="col-md-12 bg-warning">Header</div>
<div class="col-xs-12 col-md-5 pull-right bg-danger">Column 1</div>
<div class="col-xs-12 col-md-7 bg-success">Column 2</div>
<div class="col-xs-12 col-md-5 pull-right bg-info">Column 3</div>
</div>
Some notes:
When you say "goes responsive" I assume you mean "on mobile", in which case, it's good to start your HTML with that in mind, since BS3 is "mobile first". Doesn't always work, but usually, and this time it did.
Your graphics and markup suggest you want column1 and column3 to be within the same div. From a layout POV that's not necessary and makes it difficult to separate them on mobile. Here I have connected them visually without embedding one in the other.
You don't normally have to declare col-xs-12 since it's the default, but because we've messed with the layout by using pull-right, we have to be explicit.
I've been trying to adapt my website to extra small window sizes with Bootstraps but I didn't found any solution for myself.
I want to shown one column when the window is too small and keep the left version otherwise. At this point, the code is something like:
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="divLeft">
<div class="panel panel-success" id="divChart">
<!-- Some progress bars -->
</div>
</div>
<div class="col-xs-12-offset-6 col-sm-6" id="divMain">
<h2>Observations</h2>
<div class="list-group" id="observations">
<!-- Some panels -->
</div>
</div>
What I have to do? I tried to add multiple classes to my divs divLeft and divMain but it doesn't work as I want.
Thanks in advance fellas! : D
Each row should always add up to 12 columns.
Have a look at the Bootstrap Docs which tell you about how to work with their grid system:
http://getbootstrap.com/css/#grid
I'd suggest something like the below for your example:
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-md-3"></div>
<div class="col-xs-12 col-md-9"></div>
</div>
</div>
The above should result in the two columns displaying one above the other on extra small devices.