I am wondering wether is possible to set full width for some cells on Foundation 6.5 XY grid.
I am aware that the grid-container can be set to be fluid or full but my intention is to within one grid container to set some cells to be full width.
<div class="grid-container">
<div class="grid-x">
<div class="cell small-12">
Contained cell.
</div>
<div class="cell small-12 full-width-possible">
Full width cell possible?
</div>
<div class="cell small-12">
Contained cell.
</div>
</div>
</div>
I didn't find any other option than creating a separate full container.
Any ideas?
I think what you want is to have a nested cell a container with a width edge to edge of the viewport whilst its container remains at 1200px wide (of whatever Foundation default is).
An option you could try is using offsets. E.g.
HTML
<div class="grid-container full">
<div class="grid-x">
<div class="cell small-10 small-offset-1">
Contained cell.
</div>
<div class="cell small-12">
Full width cell possible?
</div>
<div class="cell small-10 small-offset-1">
Contained cell.
</div>
</div>
</div>
Example result
By using .small-12, you are setting a cell to be 100% width.
So for fluid width I'd suggest you only wrap your cell that need to be contained in a .grid-container and the fluid ones without a grid-container.
Related
I called two columns in bootstrap, suppose the height of one column is 800 PX, and then i want the text in second column to start after the height 200 PX. what should i do? I don't want to use padding or margin. Is there any predefined class in the bootstrap for it? Please help, if any one could.
You can create another div of size 200px then below it you can put your div to have a height of 600 (or 800).
Code:
<div class="row">
<div class="col-xs-6" style="height:800;;background-color:yellow">
</div>
<div class="col-xs-6" style="height:200;background-color:blue">
</div>
<div class="col-xs-6" style="height:600;background-color:black">
</div>
</div>
Using ZURB Foundation XY-Grid, I want to vertically center a cell's content, while still being able to have the cells fill the total height of the grid (for each cell to have it's own background image), which doesn't allow using the class ".align-middle" on the parent grid, since the cell height is then collapsed.
I want to be able to do this with a solid solution that will work on many different types of content, where you don't know the name and the height of the grid, so I am not looking for some specific hacks.
I have tried making the cell a flex-container, by adding the class ".flex-container", this allows me to add a class to vertically align the content, but I am hesitant to move away from the intended use of XY-grid, since it may create some other challenges that I am not forseeing now.
<div class="grid-container">
<div class="grid-x" style="height: 100px;">
<div class="cell small-6 this-cell-has-background-and-need-to-stretch">
This is the text I want vertically center
</div>
<div class="cell small-6 this-cell-has-background-and-need-to-stretch">
This is the text I want vertically center
</div>
</div>
</div>
The code above renders the cells correctly but with the text at the top of the cell.
You'll need another grid-x and an align-middle on the containers that have the background. The div inside those will be centered. Like so:
<div class="grid-container">
<div class="grid-x" style="height: 100px;">
<div class="cell small-6 grid-x align-middle" style="background:green;">
<div>This is the text I want vertically center</div>
</div>
<div class="cell small-6 grid-x align-middle" style="background:red;">
<div>This is the text I want vertically center</div>
</div>
</div>
</div>
I am new to bootstrap 4 and haven't worked on bootstrap 3 much either.
When I assign a class col-(breakpoint)-(span) to div(s), they don't automatically arrange in a single row or adjust according to the width of the window, instead they remain left aligned and stacked on top of one another. So I assign CSS flex property to the parent container and that does the trick.
Now to make these wrap according to the window size I assign classes according to bootstrap 4 grid system, but that does not make the containers wrap to the next row. Instead the combined width of the flex-items exceeds the width of the window, enabling sideways(x-axis) scroll.
What I want is that the first two containers remain in one row and last two wrap to another row on smaller screen widths(phone portrait, <576px).
<div style="display:flex;">
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
<div class="col-sm-3 col-6"></div>
</div>
Where am I going wrong?
Use all necesarry grid classes, see the docs https://getbootstrap.com/docs/4.0/layout/grid/
You have to wrap all cols in row and rows in container (.container or .container-fluid)
<div class="container">
<div class="row">
<div class="col-sm-3 col-6">x</div>
<div class="col-sm-3 col-6">y</div>
<div class="col-sm-3 col-6">z</div>
<div class="col-sm-3 col-6">a</div>
</div>
</div>
Try this to remove the style attribute that contais flex and add instead a class="row" and for the child divs replace the classes with this class="col-lg-3 col-md-3 col-6"
So, im using bootstrap 3.0, and working on columns, and im having problem with column heights.
My desired output is to have white border in between column, i was able to achieve this on columns with same height, but if the columns is shorter in height, the border is short also,
I tried setting the columns' height to 100%, but is doesnt work, setting the column's height via exact px (100px) works, but i cant use this since i need the column height to be responsive
Here is my html code
<div class="col-xs-12 bg-8560a9">
<div class="col-xs-4 text-left border-right-white full-height">Europe Zone 1 (West)</div>
<div class="col-xs-4 border-right-white full-height">
<div class="col-xs-6">794 M</div>
<div class="col-xs-6">81.6%</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-6">833 M</div>
<div class="col-xs-6">83.5%</div>
</div>
</div>
css
.full-height{height:100% !important;}
This is the common Problem that occurs when parent element don't have there heights set, height and width don't behave same for Browser,you can skip setting width but for element height this is generic issue
suppose your parent element has height: auto; and setting percentage height to children will
confuse browser to calculate height for element from an undefined value,since it is null so browser will do nothing.
you need to add
<div class="col-xs-12 bg-8560a9 full-height">
<div class="col-xs-4 text-left border-right-white full- height">Europe Zone 1 (West)</div>
<div class="col-xs-4 border-right-white full-height">
<div class="col-xs-6">794 M</div>
<div class="col-xs-6">81.6%</div>
</div>
<div class="col-xs-4 full-height">
<div class="col-xs-6">833 M</div>
<div class="col-xs-6">83.5%</div>
</div>
</div>
this will again work only if parent element height is set,
full reference to this problem is here
So, if you want to set a height on your web pages to a percentage, you have to set the height of every parent element of the one you want the height defined.
I have the following div:
<div style="background:red;width:100%;height:100%">Red</div>
When I stick it into the page without a container div, I can see it. But when I stick it into a container
<div class="container">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
I can't see that div at all. When I stick it into an additional:
<div class="row">
<div class="span3">
<div style="background:red;width:100%;height:100%">Red</div>
</div>
</div>
I can see it, but there is a lot of padding and tons of spacing all around. How can I create a container div that doesnt have any margins/padding etc. that is equal to 0?
In fact, if you are using Bootstrap grid system, some margins and padding are added to maintain spacing between columns and page boundaries. So direct answer to your question is: no, you can't.
However, you can simply have a div that is not wrapped in div with .container class - then your div will not have any margins and paddings derived from grid system.
<div class="container">
<div class="row">
<div class="col-md-8">8-units column</div>
</div>
</div>
<div style="width: 100%; background: red;">Your div to be expanded to full page's width</div>
<div class="container">
<div class="row">
Another div within grid system
</div>
</div>