with Bootstrap and its layout system is it possible to have rows in columns to produce this type of result :
I tried this but without success :
<div className="col-lg-3 col-12">
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
<div className="row">
<displaySquare />
</div>
</div>
<div className="col-lg-9 col-12">
<div className="row">
<displayBigSquare />
</div>
<div className="row">
<displaySquare />
<displaySquare />
</div>
</div>
ty
UPDATE (23/08/2021):
it's actually better with grid. I dropped bootstrap and I use GRID instead which allows to define all the properties related to CSS grids (GRID explanations on https://developer.mozilla.org/fr/docs/Web/CSS/grid).
HTML code:
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Griiiiid!</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<h1 class="centre">Welcome</h1>
<div class="container">
<div class="items item1">1</div>
<div class="items item2">2</div>
<div class="items item3">3</div>
<div class="items item4">4</div>
<div class="items item5">5</div>
<div class="items item6">6</div>
</div>
</body>
</html>
CSS code:
*,
::before,
::after {
box-sizing: border-box;
}
body {
background-color: #333;
margin: 0;
padding: 0;
font-family: Georgia, "Times New Roman", Times, serif;
}
h1 {
color: salmon;
}
.centre {
text-align: center;
}
.container {
padding: 30px ;
width: 100%;
background-color: #eee;
margin: 30px auto;
display: grid;
grid-template-rows: 150px;
grid-template-columns: repeat (3, 150px);
grid-auto-rows: 150px;
gap: 30px;
}
.items {
padding: 20px;
font-size: 30px;
font-family: sans-serif;
}
.item1 {
background-color: lightcoral;
}
.item2 {
grid-row: 1/3;
grid-column: 2/4;
background-color: lightgreen;
}
.item3 {
background-color: lime;
}
.item4 {
background-color: chocolate;
}
.item5 {
background-color: darkgoldenrod;
}
.item6 {
background-color: darkseagreen;
}
Result:
As of Bootstrap v5.0.2, the answer is no. The issue is that in order to have the orange rectangle in your example span multiple "rows", you need to use CSS Grid styling, and that is not yet part of Bootstrap.
However, very soon in v5.1.0, they are including an opt-in option to replace the flexbox-based grid system they currently use with a CSS Grid-based one instead. It will probably have some growing pains, and I'm not sure that they have support for doing what you're trying to do here just yet, but at least CSS Grid will be there to try out. There will be documentation added for how to enable the option and how to use it once that version goes live, but you can read through the feature's PR in the meantime.
If you are wanting that exact layout, then you would have to do it in two rows:
The margin bottom of the square need to equal double your gutter
.square {
width: 100%;
padding-top: 100%;
background: orange;
margin-bottom: 30px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-4">
<div class="square"></div>
<div class="square"></div>
</div>
<div class="col-8">
<div class="square"></div>
</div>
</div>
<div class="row">
<div class="col-4">
<div class="square"></div>
</div>
<div class="col-4">
<div class="square"></div>
</div>
<div class="col-4">
<div class="square"></div>
</div>
</div>
</div>
Related
There's a left and right margin for the columned-footer which I did not define or at least I can't find the definition now. So, to get rid of it, I did define margin-left and right to be 0 but that had no effect on it.
I don't get why the two columns are so next to each other and far from the screen borders. Also when the address is a longer text, the margin disappears and it sticks to the screen border! How to remove that annoying margin, and how to make it responsive?
.columned-footer {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(70, 66, 66);
height: 8rem;
color: rgb(243, 240, 235);
width: 100%;
}
.footer-container {
display: grid;
gap: 1rem 3rem;
grid-template-columns: 1fr 1fr;
}
.address {
float: right;
display:inline;
}
.tel {
float: left;
display:inline;
}
<footer>
<div class="columned-footer">
<div class="footer-container">
<div class="address">address
<div>
Right around the corner
</div>
</div>
<div class="tel">tel
<div> 8877887788
</div>
</div>
</div>
</div>
</footer>
The side spaces are due to the application of the justify-content style. The spaces at the top are due to the align-items style being applied.
You can use the following footer that I edited using Bootstrap 5. By editing the column widths, you adjust both the left and right spacing and the design is responsive.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Footer</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
<footer class="bg-dark text-center text-white">
<div class="container p-4 pb-0">
<section class="">
<form action="">
<div class="row d-flex justify-content-center">
<div class="col-md-3">
<div class="form-outline form-white mb-4">
<div><strong>Address</strong></div>London
</div>
</div>
<div class="col-md-5">
<!-- Something -->
</div>
<div class="col-md-3 col-12">
<div class="form-outline form-white mb-4">
<div><strong>Phone</strong></div>+12 345 678 90 12
</div>
</div>
</div>
</form>
</section>
</div>
<div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">
#2021
<a class="text-white" href="https://mdbootstrap.com/">example.com</a>
</div>
</footer>
</body>
</html>
Do, body {margin: 0} (as this value come from browser-default values for various html-elements.
Good Habit
Whenever, you try to make your own website, or project, you must always make default reset in your main css file. This means:
* {margin:0; padding:0; box-sizing:border-box}
When you don't do this, browser's default CSS applies to your various HTML-Elements that you are using, untill you are overriding them specifically, while writing your CSS.
.columned-footer {
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(70, 66, 66);
height: 8rem;
color: rgb(243, 240, 235);
width: 100%;
}
.footer-container {
display: grid;
gap: 1rem 3rem;
grid-template-columns: 1fr 1fr;
}
.address {
float: right;
display:inline;
}
body {background: red; margin: 0;}
.tel {
float: left;
display:inline;
}
<footer>
<div class="columned-footer">
<div class="footer-container">
<div class="address">
<div>address</div>
<div>Right around the corner</div>
</div>
<div class="tel">
<div>tel</div>
<div>8877887788</div>
</div>
</div>
</div>
</footer>
I'm trying to make a grid with items/pizza toppings to order, and I would like an "Add to cart" button under each item in the grid. How would I go about doing that?
So far I've tried simply putting a button with a line break under an element but as assumed, that didn't work.
Here is the relevant code I have in the body:
.wrapper {
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-auto-rows: 200px;
grid-row-gap: 30px;
grid-column-gap: 10px;
}
.item {
background: firebrick;
color: white;
padding: 10px;
}
.item:nth-child(even) {
background: rgb(139, 19, 19);
}
.add {
margin-bottom: 100px;
}
button {
margin-bottom: 100px;
}
#container {
background-color: maroon;
width: 1500px;
height: 1200px;
margin-left: auto;
margin-right: auto;
border-color: black;
border-width: 10px;
border-style: double;
}
<div id="container">
<div id="header">
<h1> Pizza Planet </h1>
<script src="index.js"></script>
</div>
<div id="content">
<h2>Select your items:</h2>
<div class="wrapper">
<div class="item">1</div>
<div class="add"><button>Add To Cart</button></div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</div>
</div>
All that does is make a huge gap for another cell on the grid with a tiny add to cart button on there. Any help would be appreciated, thank you.
One approach might be to use CSS grid to achieve what you require. A simple grid layout for what you describe above could be done like this:
.item img {
width:100%;
/* Causes the button to sit below the img */
display:block;
}
.item button {
width:100%;
}
.grid {
/* Specifies css grid to be used */
display:grid;
/* Specifies the number of columns and sizes in the grid */
grid-template-columns: 1fr 1fr;
/* Specifies spacing between grid cells */
grid-gap:1rem;
}
<div class="grid">
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
<div class="item">
<img src="http://wallpapersdsc.net/wp-content/uploads/2015/11/Pizza_Images12.jpg" />
<button>Order</button>
</div>
</div>
assume I try to get almost similar kind of result.
So i write this code to get this this kind of box . But the code is not complete Please see my code ,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.row{
width:90%;
margin-left:5%;
margin-right:5%;
}
.hig-co{
width:66.6677% !important;
max-width:66.667% !important;
min-width:66.667% !important;
}
.sm-co{
width:33.333% !important;
max-width:33.333% !important;
min-width:33.333% !important;
}
.hig-all{
width:95%;
}
</style>
<div class="container">
<div class="row">
<div class="all">
<div class="hig-co">
<div class="hig-all">
<img src="#" />
</div>
<div class="hig-all">
<div class="col-md-4 col-sm-4">
<img src="#">
</div>
<div class="sm-co">
<img src="#">
</div>
</div>
</div>
<div class="col-md-3 col-sm-12 sm-co">
<div class="col-md-12 col-sm-12"><img src="#"></div>
<div class="col-md-12 col-sm-12"><img src="#"></div>
<div class="col-md-12 col-sm-12"><img src="#"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Please help to complete this .
Here I have to make almost same kind of result. So Please help to make this kind of structure using css . Please not i will display this layout only if screen size min width is 766px. If the screen size less than 766px i will hide this layout using media query . After making this layout i will insert images to this layout . So images need automatically fit in this layout .
Here is a simple solution using Flexbox where you can easily adjust the different sizes:
body {
margin: 0;
}
* {
box-sizing:border-box;
}
div {
border:1px solid #fff;
}
.container {
display: flex;
height: 100vh;
}
.left {
flex: 3;
display:flex;
flex-wrap:wrap;
}
.left > div:nth-child(1) {
width:100%;
height:40%;
background:red;
}
.left > div:nth-child(2) {
width:33%;
height:60%;
background:red;
}
.left > div:nth-child(3) {
flex:1;
background:blue;
}
.right {
flex: 2;
display: flex;
flex-direction: column;
}
.right > div:nth-child(1),.right > div:nth-child(3) {
height:25%;
background:red;
}
.right > div:nth-child(2) {
flex:1;
background:blue;
}
<div class="container">
<div class="left">
<div></div>
<div></div>
<div></div>
</div>
<div class="right">
<div></div>
<div></div>
<div></div>
</div>
</div>
I have a great solution with CSS Grids..
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div class="container">
<section>
<header>
<img src="demo.jpg" alt="">
</header>
<div class="left-left">
<img src="demo.jpeg" alt="">
</div>
<div class="left-right">
<img src="demo.jpg" alt="">
</div>
</section>
<aside>
<div class="right-top">
<img src="demo.jpeg" alt="">
</div>
<div class="right-middle">
<img src="demo.jpeg" alt="">
</div>
<div class="right-bottom">
<img src="demo.jpeg" alt="">
</div>
</aside>
</div>
</body>
</html>
CSS:
.container {
display: grid;
grid-template-columns: 66.667% 33.333%;
grid-template-areas:
"section aside";
}
section {
grid-area: section;
display: grid;
grid-template-columns: 42% 58%;
grid-template-rows: 281px 501px;
grid-template-areas:
"header header"
"left-left left-right"
}
header {
grid-area: header;
}
.left-left {
grid-area: left-left;
}
.left-right {
grid-area: left-right;
}
aside {
grid-area: aside;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 150px 480px 1fr;
grid-template-areas:
"right-top"
"right-middle"
"right-bottom";
}
.right-top {
grid-area: right-top;
}
.right-middle {
grid-area: right-middle;
}
.right-bottom {
grid-area: right-bottom;
}
img {
width: 100%;
height: 100%;
}
I'm not entirely sure what you meant with "And the thin if our screen size less than this 756 then we will hide this and the maximum width of the container is 1180 px." but a simple media query would definitely do the trick here.
Working on a CSS Grid example that contains several photo cards (items). Let's imagine that these items are created dynamically by any server-side logic.
The last item in the grid container is a div element defined as a footer for that grid, which also contains a button that has to be center-aligned inside its parent.
By the grid definition, the footer takes the height of the implicit row: 200px. The footer element spans the 2 columns of the grid.
How can the footer, being in the last implicit row, have a smaller size than the grid-auto-rows property, defined on the grid container?
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: 200px;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card>img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
background-color: lightgreen;
grid-column: 1 / 3;
}
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
The grid-auto-rows property only accepts track sizes as values. It does not accept any form of syntax that would allow you to target a particular row.
Therefore, another method is needed to size the grid item appearing in the last implicit row.
Here's a simple solution: Target the last item directly.
.photos-footer {
height: 50px;
}
And then, because you want the content of that item (the button) centered, use flexbox:
.photos-footer {
height: 50px;
display: flex;
justify-content: center;
align-items: center;
}
Here's the full code:
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: 200px;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card > img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
height: 50px;
align-self: end; /* align item to bottom of row */
display: flex;
justify-content: center;
align-items: center;
grid-column: 1 / 3;
background-color: lightgreen;
}
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
NOTE that this solution doesn't actually change the height of the last grid row, which remains at 200px, per the grid-auto-rows rule. This solution changes only the height of the grid item inside the last row. That's why there's a gap between the penultimate row and the grid item pinned to the bottom of the last row.
If the last row itself must have a different height, then I would suggest removing it from the grid container and placing it underneath as a new element.
NOTE also that the problem raised in the question applies only in the implicit grid. In the explicit grid, defining the height of the last row (or any row, for that matter) is simple and easy.
Maybe using grid-auto-rows: min-content; is fine here . grid-template-rows:50px; will only set first row's height.
height or max-height could be used on .photo-card if necessary.
.travel-photos {
margin: 0 auto;
width: 80%;
background: lightblue;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
grid-auto-rows: min-content;
grid-gap: 20px 10px;
}
.travel-photos h1 {
text-align: center;
grid-column: 1 / 3;
}
.photo-card>img {
width: 100%;
height: 100%;
background-color: cyan;
}
.photos-footer {
background-color: lightgreen;
grid-column: 1 / 3;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
</head>
<body>
<section class="travel-photos">
<h1>PHOTOS</h1>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photo-card">
<img src="http://lorempixel.com/200/200/">
</div>
<div class="photos-footer">
<button>MORE</button>
</div>
</section>
</body>
</html>
This question already has answers here:
flex-grow not sizing flex items as expected
(5 answers)
Closed 5 years ago.
I have two flex rows. First row has 6 equal columns with flex: 1. Second row has column with flex: 4 and column with flex:2. Columns have margin-right: 10px set, except for last child in a row.
http://jsbin.com/gufihoyaha/edit?html,css,output
.row {
display: flex;
}
.row .col {
margin-right: 10px;
background-color: coral;
}
.row .col:last-child {
margin-right: 0;
}
.flex-1 {
flex: 1;
}
.flex-4 {
flex: 4;
}
.flex-2 {
flex: 2;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="row">
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
</div>
<div class="row">
<div class="col flex-4">4</div>
<div class="col flex-2">2</div>
</div>
</body>
</html>
But the result differs from what I expected:
What I want is something like this:
Question:
Why does it happen and how to fix that?
Only display:grid would actually be able to do this correctly:
unfortunately, at this time, it is quiet new and not implemented every where. See http://caniuse.com/#search=grid
To know more about it : https://css-tricks.com/snippets/css/complete-guide-grid/
.row {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.row .col {
background-color: coral;
margin-right: 10px;
}
.row .col:last-child {
margin-right: 0;
}
.flex-1 {}
.flex-4 {
grid-column: auto / span 4;
}
.flex-2 {
grid-column: auto / span 2;
}
<div class="row">
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
<div class="col flex-1">1</div>
</div>
<div class="row">
<div class="col flex-4">4</div>
<div class="col flex-2">2</div>
</div>