I'm working with Zurb Foundation 4.3 and am having trouble wrapping my head around Zurb's small and large column classes. In the code sample below using just large classes for columns, the 2nd column will get repositioned below the first column when the UI width changes. This is nice because it keeps the UI content clean
<div class="row">
<div class="large-8 columns rounded">
Bubbles
</div>
<div class="large-4 columns rounded">
Yadda Yadda Yadda
</div>
</div>
However, if I add small classes to the columns, the 2nd column doesn't get repositioned resulting in a messy UI.
<div class="row">
<div class="small-4 large-8 columns rounded">
Bubbles
</div>
<div class="small-8 large-4 columns rounded">
Yadda Yadda Yadda
</div>
</div>
I like the ability to be able to change the column widths of the content as the overall page changes widths. However, as I drag the page from wide to narrow, the content doesn't reposition if I use the small classes. What am I missing? Thanks.
The small classes control the widths of your columns on small screens, without specifying small classes, columns default to small-12 or 100% width on small screens which is why you see them stack vertically.
In your second example, the first column to second columns ratio will be 1:2 for small screens instead the 2:1 on medium screens. The columns positioned next to each other in the same order but their sizes are swapped.
This should be what you are seeing.
If you wish to have them stack vertically like in the first example but swap the order of columns, use
<div class="row">
<div class="large-4 push-8 columns rounded">
Yadda Yadda Yadda
</div>
<div class="large-8 pull-4 columns rounded">
Bubbles
</div>
</div>
If this is not what you wish to achieve I'll help you specify another solution
Related
I am using Angular Material, which makes use of Flexboxes.
I would like to wrap boxes so that they spread across several rows. I am actually successfully doing this with the following code :
<div layout="row" layout-align="start start" layout-wrap layout-margin>
<md-card ng-repeat="SOME ITERATION" flex>
SOME CONTENT
</md-card>
</div>
However rows are not filled completely. The <md-cards> don't strech until filling the whole space available in one row.
Here is a visual representation of what I would like to do :
<md-cards> would be the orange boxes, and they would fill the whole space on each available row.
Any suggestion about how to implement this with Flexboxes (if possible) is most welcome !
This is my code
<div ng-repeat="obj in descArray | filter : searchTxt">
<div class="col-md-6">{{obj.description}}</div>
</div>
I wanted it to be either 3 column layout (col-md-4) or two column layout (col-md-6) based on page design. The problem here is that I wanted my rows to be of equal height with a border for each div.
I cannot fix the height of the div as it may be dynamic hence I want divs in a single row to be aligned properly with equal height in a single row.
I tried various ways such as clearfix method in this case each div is aligned within its row but my div's borders are not of same height.
<div ng-repeat-start="obj in descArray | filter : searchTxt">
<div class="col-md-6">{{obj.description}}</div>
<div class="clearfix " ng-if="$index%2===1"></div>
<div ng-repeat-end=""></div>
Also wanted to support ng-repeat filter.
I'm trying to build a side Control Panel for Dashboard something similar to http://demo.neontheme.com/dashboard/highlights/
Can anyone give me some pointers for some examples where I can start building it ?
Thanks
Take a look at Bootstrap's vast range of Components (if you haven't already), and break down the functionality according to what you wish to accomplish.
For example, at a glance:
I can see that the page is fluid, and the left-hand navigation takes up roughly 2/12 (by default, Bootstrap utilises a 12-column grid system).
<div class="container-fluid">
<div class="row">
<div class="row">
<div class="col-md-2">
<!-- Menu -->
</div>
<div class="col-md-10">
<!-- Content -->
</div>
</div>
</div>
</div>
Accordions are in use to collapse/expand menu items, so you can harness Bootstrap's collapse.js to achieve this.
Also, some menu items have Labels and/or Badges attached to them, which Bootstrap also caters for.
Resources:
http://www.getbootstrap.com/css/#grid-example-fluid
http://www.getbootstrap.com/javascript/#collapse
http://www.getbootstrap.com/components/#labels
http://www.getbootstrap.com/components/#badges
I have a list of horizontal divs that I cannot make them act as I want them to.
What I want to achieve is have
for md, lg, sm - a list a rectangular divs that contain a small "thumbnail" class image of any sized image and continue with the user's name horizontaly - as can be seen in the example in md view.
for xs I want to have each entry below the other, name below the image - which should be screen size.
I could not exemplify with the image as I already used too much inline css.
http://www.bootply.com/T0AAHhHU0h
Unless I misunderstood your question, it looks like you're pretty close to what you're looking for... just change your col-md-3 to col-sm-3 and the switch to vertical layout will happen at xs breakpoint instead of sm breakpoint, as here: http://www.bootply.com/Ba1aGC1Lds.
<div class="col-sm-3" style="margin-bottom:20px">
<div class="col-md-12" style="border:1px solid #C0C0C0;background-color:white">
<div class="col-md-4" style="background-color:black;height:60px">
</div>
<div class="col-md-8">
<strong>John Smith</strong>
</div>
</div>
I would like to have some blocks of content display in one column in portrait mode (iPhone 5+ is 640px wide), and two columns when in landscape mode (iPhone 5+ is 1136px wide). My understanding reading the documentation (http://getbootstrap.com/css/#grid-media-queries) was that below 768px wide, Bootstrap would use the col-xs-* classes and that above 768px, Bootstrap would use the col-sm-* classes.
My markup looks something like:
<div class="col-xs-12 col-sm-6">some content</div>
<div class="col-xs-12 col-sm-6">some more content</div>
What am I missing here?
Remove the period before .col-sm-6 in the markup. Should be like this with only a space between:
<div class="col-xs-12 col-sm-6"></div>
Markup doesn't need the class indicator. Furthermore you only really need col-sm-6 because by default Bootstrap automatically goes to col-xs-12 below 768.
<div class="col-sm-6"></div>