Why has the grid system stopped working in 6.4.1? It was working in 6.3.1.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/css/foundation.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.1/js/foundation.min.js"></script>
<div class="row">
<div class="medium-2 columns">2 columns</div>
<div class="medium-10 columns">10 columns</div>
</div>
<div class="row">
<div class="medium-3 columns">3 columns</div>
<div class="medium-9 columns">9 columns</div>
</div>
<script>
$(document).foundation();
</script>
Any ideas?
It seems that the XY Grid is the new grid system to use with the version 6.4 (Release notes).
While the float grid is still supported as a legacy (Foundation grids).
Related
In Bootstrap 5 I would like to achieve reordering columns between desktop and mobile like on this picture
I have tried the order classes and workaround with position: absolute, but that does not work as I would like to.
I also found there was somebody trying to achieve the same, but probably with old bootstrap and without a satisfying solution (I would like to avoid float). Also, green plus red part can have higher height than blue one.
The simple code without reordering is here:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-xxl-6">
<div style="height:20px; background-color:green;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:60px; background-color:blue;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:40px; background-color:red;"></div>
</div>
</div>
You can use the display: flex property, in bootstrap it would be the classes with.flex- *
https://getbootstrap.com/docs/5.0/utilities/flex/
and to better understand how the display: flex works
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You can do this by duplicating the green section using different .d-* display utility classes. The first instance should be hidden above the breakpoint with .d-xxl-none and the second instance should be hidden below the breakpoint with .d-none and shown above with .d-xxl-block:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<div class="row">
<div class="col-12 col-xxl-6 d-xxl-none">
<div style="height:20px; background-color:green;"></div>
</div>
<div class="col-12 col-xxl-6">
<div style="height:60px; background-color:blue;"></div>
</div>
<div class="col-12 col-xxl-6">
<div class="d-none d-xxl-block" style="height:20px; background-color:green;"></div>
<div style="height:40px; background-color:red; "></div>
</div>
</div>
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6" style="background-color:yellow;">50%</div>
<div class="col-sm-6" style="background-color:orange;">50%</div>
</div>
<div class="row">
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
<div class="col-sm-4" style="background-color:orange;">33.33%</div>
<div class="col-sm-4" style="background-color:yellow;">33.33%</div>
</div>
</div>
</div>
</body>
</html>
On bigger screen you can see 2 and 3 columns respectively but in print view why every col is in new line ?
because Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with a flexbox and is fully responsive.
In Semantic UI, I could use .four.wide.column to make a 4/16 wide column on all devices / viewports.
But in Foundation, It seems like I have to use .small-4.medium-4.large-4 to make sure the column has the same width on the different devices / viewports.
Is there anything like ... .all-4 column width in Foundation so I don't have to use .small-4.medium-4.large-4?
<!-- Semantic UI -->
<div class="ui grid">
<div class="four wide column"></div>
</div>
<!-- Foundation -->
<div class="grid-x">
<!-- Is there a .all-4 class? -->
<div class="small-4 medium-4 large-4 cell"></div>
</div>
Have a look at the Foundation XY Grid Docs
.cell {
background: #1779ba;
color: #fefefe;
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation.min.css" rel="stylesheet" />
<div class="grid-x grid-margin-x">
<div class="cell small-6">6 cells</div>
<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x grid-margin-x ">
<div class="cell small-4">4 cells</div>
<div class="cell small-4">4 cells</div>
<div class="cell small-4">4 cells</div>
</div>
Or if you need, the older Foundation float grid docs. (These are now disabled by default, and were replaced in v6.4)
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.5.0/css/foundation-float.css" rel="stylesheet" />
<div class="row">
<div class="columns small-4">4</div>
<div class="columns small-4">4</div>
<div class="columns small-4">4</div>
</div>
<div class="row">
<div class="columns small-6">3</div>
<div class="columns small-6">9</div>
</div>
If you use <div class="small-4 cell"></div> it will have the right size on all viewports.
The classes are always overwritten by the next higher one, e.g.: medium overwrites small
I am using a Bootstrap v4.1.2.I am trying to use col-md-6 but on my pc >1300px width but it is not showing in two columns.But if i am using float:left it works
But otherwise it is showing in only one columns and blank another column (both in case of using container or container-fluid or nothing)
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
.....
</div>
<div class="col-6">
.....
</div>
</div>
</div>
Basing on Bootstrap 4 Documentation (https://getbootstrap.com/docs/4.0/layout/grid/) it should look like this :
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
</div>
The correct <link> to use Bootstrap 4.1.2 CSS is:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
Have you checked the browser console? Because you're not correctly linking it, the CSS could be getting blocked.
Working code:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-6">
.....
</div>
<div class="col-6">
.....
</div>
</div>
</div>
I am using Semantic-UI for my Rails project, actually i'm using https://github.com/doabit/semantic-ui-sass , everything is fine except when i use "stackable" for a responsive grid.
I am using the next official example:
<h3 class="ui center aligned header">Stackable Grid</h3>
<div class="ui two column stackable grid">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="three column row">
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
<div class="column">
<div class="ui segment">Content</div>
</div>
</div>
<div class="ten wide column">
<div class="ui segment">Content</div>
</div>
<div class="six wide column">
<div class="ui segment">Content</div>
</div>
</div>
It works perfectly in a HTML file alone, but in Rails it does not trigger the media queries. I also tested using the semantic.min.css and semantic.min.js in vendor files without any gem and i am getting the same result.
Besides i have tested it in either Rails 4.2.6 and 5.0.0.
I should kill myself, it was enterily my bad. I forgot add:
<meta name=viewport content="width=device-width, initial-scale=1">
Thank you for everyone who read this.