Bootstrap 4 - using Flexbox with responsive columns - responsive-design

I am trying to make a row with buttons positioned at the beginning of the row and at the end. Here are two images. First when the Browser is maximized:
The second is after I resized the Browser:
For that I am implementing the following code:
<div class="d-flex justify-content-end">
<div class="mr-auto p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
</div>
Fiddle
Just to learn how to use Flexbox with B4. The code does position items correctly, but when I resize it the columns dont stack up.
Any idea how to make it fully responsive?
Thanks for the help.

The flex-row and flex-column classes can also be used responsively. You could use flex-sm-row to keep the row horizontal on sm and up, then flex-column to stack vertically on xs screen widths...
<div class="d-flex flex-sm-row flex-column">
<div class="mr-auto p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
</div>
http://www.codeply.com/go/G3Z6OLCBtF

Related

Foundation framework - moving column source order between rows

I have a Foundation-specific query and hoped you could help. I have a first row of two columns above a second row. I want the second (righ hand) column of the first row to fall beneath the second row in mobile format. I've looked into push/pull etc but I'm having difficulty switching columns between rows. Any ideas how this can be achieved please?
Thanks,
MK
This is not directly possible in the way you describe via Foundation's Push / Pull, as it is to reorder columns only (not rows and columns).
You could reconstruct your HTML to be just one row (this has other associated problems though), and then use Push / Pull
Or (more simply) employ the Visibility classes to show one row for small only and hide it for medium upwards and the other vice versa:
<div class="row">
<div class="small-12 medium-6 columns">
Top left
</div>
<div class="medium-6 columns show-for-medium">
Top right
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns">
Bottom
</div>
</div>
<div class="row">
<div class="small-12 columns show-for-small-only">
Bottom for small
</div>
</div>
This example in a jsfiddle.

How to force Foundation to go 2 columns first before going full width?

I'm using Foundation for our website and there's a section where there are 3 boxes / columns per row. As in:
CODE:
<div class="row">
<div class="large-4 columns">[BOX]</div>
<div class="large-4 columns">[BOX]</div>
<div class="large-4 columns">[BOX]</div>
</div>
Now when the browser is resized to about 1023px, each column suddenly changes to full width, as in:
..even though there is still some space on the right to go 2-columns first.
How do I make it so that Foundation goes to 2-columns first at a certain media query size before going full-width?
For people that may find this helpful:
<div class="row small-up-1 medium-up-2 large-up-3">
<div class="columns">
</div>
</div>
Large-up-3 means on large screen, the columns would be 3,
Medium-up-2 means on medium screen, the columns would be 2,
Small-up-1 means on small screen, the column would be 1 only.
You can change the numbers as per how many columns you want displayed.
(Foundation 5 has this update.)

Bringing columns closer together?

I have a nav, I need to bring the items closer together though. What's the best way to achieve this in foundation?
Fiddle
<div class="row small-collapse text-center">
<div class="small-3 columns yellow">
Nav 1
</div>
<div class="small-3 columns tomato">
Nav 2
</div>
<div class="small-3 columns yellow">
Nav 3
</div>
<div class="small-3 columns tomato">
Nav 4
</div>
</div>
What you need to do is make a custom row class ($row-width: rem-calc(1000); is the default). The row is governing the width of the nav (columns are contained to the width of the row and will fill available space) and thus the total padding of elements. Example Fiddle: https://jsfiddle.net/kjtybe9s/.
Example SCSS in the Foundation 5 Docs:
.custom-row-class {
#include grid-row();
.custom-column-class {
#include grid-column(12);
}
}
On a side note, outside of collapse part, to change the width between columns, you can adjust the SASS (in _global.scss). The default is here:
$column-gutter: rem-calc(30) !default;

Zurb Foundation: Want horizontal scrollbar

I have the following code:
<div class="row">
<div class="large-12 columns">
<div class="item">ITEMS GO HERE</div>
<div class="item">ITEMS GO HERE</div>
... many .item here ...
</div>
</div>
Each .item would have a fixed width, say 150px. I want the div large-12 to be scrollable if there are more .item that it can fit within the current screen. How can I do that? Currently, if I add too many .item, then they go to the next line!
Thanks
You'll need to add an overflow-x:scroll; and white-space:nowrap; to the parent container. And a display:inline-block; to the .items.
Here's a working demo.

Bootstrap 3 div horizontal list

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>

Resources