I am trying to display cards (divs) in a container and put them in the center. I use display:flex and justify-content:space-around. It works great, but in the example I give below, the cards always have to be 4 in a row:
#container {
display: flex;
flex-wrap: wrap;
width: 200px;
justify-content: space-around;
border: 1px red solid;
}
#container .card {
flex-basis: 23%;
background: yellow;
}
<div id="container">
<div class="card">
Card 1
</div>
<div class="card">
Card 2
</div>
<div class="card">
Card 3
</div>
<div class="card">
Card 4
</div>
<div class="card">
Card 1
</div>
<div class="card">
Card 2
</div>
<div class="card">
Card 3
</div>
<div class="card">
Card 4
</div>
<div class="card">
Card 3
</div>
<div class="card">
Card 4
</div>
</div>
How can I align the last cards to the left and how do I do this the most proper way, also bearing in mind I am showing the card in a for loop in python or php?
display:grid is not as cross-browser compatible as display:flex, therefore still not a good option for me. Thanks!
No need for justify-content in that case. Center the content with equal margins.
#container {
display: flex;
flex-wrap: wrap;
width: 200px;
border: 1px red solid;
}
#container .card {
flex-basis: 20%;
margin-right: 2.5%;
margin-left: 2.5%;
background: yellow;
}
<div id="container">
<div class="card">
Card 1
</div>
<div class="card">
Card 2
</div>
<div class="card">
Card 3
</div>
<div class="card">
Card 4
</div>
<div class="card">
Card 1
</div>
<div class="card">
Card 2
</div>
<div class="card">
Card 3
</div>
<div class="card">
Card 4
</div>
<div class="card">
Card 3
</div>
<div class="card">
Card 4
</div>
</div>
Related
How can I keep the margin-bottom only for the elements that are not in the last line ?
.container {
display: flex;
flex-flow: row wrap;
background: green;
justify-content: space-between;
}
.block {
height: 60px;
max-width: calc((100% - (12px * 2)) / 3);
flex-basis: calc((100% - (12px * 2)) / 3);
background: orange;
box-shadow: inset 0 0 0 3px black;
margin-bottom: 12px;
}
<div class="container">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
Thanks in advance.
This is what you are looking for:
.container .block:nth-last-child(-n+3){
margin-bottom: 0px;
}
for flex and grid, you can use the gap propertie to avoid playing with margins:
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
The gap CSS property sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.
Applies to multi-column elements, flex containers, grid containers
see https://www.caniuse.com/?search=gap for support
to set 3 elements on a line, give a min-width bigger than 25% and set them to grow via flex-grow. for the demo i used 26%, should be small enough to leave room for the gaps .
Demo of your code witout margins but still a gap in between elements
.container {
display: flex;
flex-flow: row wrap;
background: green;
gap: 12px;
/* see https://www.caniuse.com/?search=gap for support */
}
.block {
height: 60px;
flex: 1 1 0; /* or flex:1; */
/* to stretch them at the most and even their sizes*/
min-width: 26%;
/* it cannot be more than 3 on a row */
background: orange;
box-shadow: inset 0 0 0 3px black;
padding:5px; /* padding is fine */
}
<div class="container">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
<hr>
<div class="container">
<div class="block">A single line
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
<hr>
<div class="container">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">a second and last line
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
<hr>
<div class="container">
<div class="block">2 blocks , is that okay ?
</div>
<div class="block">
</div>
</div>
You can also use CSS grid:
.container {
display: grid;
grid-template-columns:repeat(3,1fr);
grid-gap:12px;
background: green;
}
.block {
height: 60px;
background: orange;
box-shadow: inset 0 0 0 3px black;
}
<div class="container">
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
I have pages with containers that contain rows containing columns.
I would like to enlarge the space between my columns
Here’s the code from my front page.
The first column of my second row must be the size of the first 2 columns of my first row.
<div class="container">
<div class="row">
<div class="col-md-4 card">
row 1 col 1
</div>
<div class="col-md-4 card">
row 1 col 2
</div>
<div class="col-md-4 card">
row 1 col 3
</div>
</div>
<div class="row">
<div class="col-md-8 card">
row 2 col 1
</div>
<div class="col-md-4 card">
row 2 col 2
</div>
</div>
</div>
For my second page, here is the code
<div class="container">
<div class="row">
<div class="col-md-8 card">
row 1 col 1
</div>
<div class="col-md-4 card">
row 1 col 2
</div>
</div>
</div>
I am this currently
Current Behavior
I want to expand the space between my columns. And that on the second line, while enlarging my margins, that the first column remains aligned with the first 2 of the first line
I have redone my page with flex but I still can’t align the first column of my second line with the first 2 of the first line
<div class="container">
<h3>Title</h3>
<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 1
</mat-card>
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 2
</mat-card>
<mat-card class="bloc-section" fxFlex="33.3%">
row 1 col 3
</mat-card>
</div>
<div fxLayout="row" class="flex-row" fxLayout.xs="column" fxLayoutGap="16px" fxLayoutAlign="center">
<mat-card class="bloc-section" fxFlex="67%">
row 2 col 1
</mat-card>
<mat-card class="bloc-section" fxFlex="33%">
row 2 col 2
</mat-card>
</div>
</div>
You can add css like this
.container .row {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
And fix your template
<div class="container">
<div class="row">
<div class="col-md-4 card">
row 1 col 1
</div>
<div class="col-md-4 card">
row 1 col 2
</div>
</div>
</div>
Do not try to copy the code. Try to understand the concept so you can create any grade.
At Bootstrap we have 12 columns (per row). This means that each row must be assigned to 12 columns
You should also know that: Bootstrap 3.
Note: It's different in Bootstrap 4.
xs: screens less than 768px wide
sm: screens equal to or greater than 768px wide
md: screens equal to or greater than 992px wide
lg: screens equal to or greater than 1200px wide
Your example:
In the first row, we have 3 equal columns: 12 / 3 = 4
In the second row, we have 2 columns.
That First column = first two columns in the previous row: 4 + 4 = 8
Example for xs: < 768px
Affects all sizes.
.row div div{
border-radius: 10px;
border: 2px solid;
background:#ddF;
text-align:center;
}
.row.mar{
margin-top:2px;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-4"><div>.col-xs-4</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
</div>
<div class="row mar">
<div class="col-xs-8"><div>.col-xs-8</div></div>
<div class="col-xs-4"><div>.col-xs-4</div></div>
</div>
</div>
Example for sm: >= 768px
As a result, the size of each column is 12 (total). for less than 768px
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
<div class="col-sm-4"><div style="background:#ddd;">.col-sm-4</div></div>
</div>
<div class="row">
<div class="col-sm-8"><div style="background:#ddd;text-align: center;">.col-sm-8</div></div>
<div class="col-sm-4"><div style="background:#fdd;">.col-sm-4</div></div>
</div>
</div>
Custom example:
First row:
Only xs-4. For all sizes. Affects all sizes because no other size is defined.
Second row:
xs-4 and 4 md-7 and 5 lg-6 and 6 ( > 1200 (6) and > 992px(7,5) and other sizes(4))
.row div p{
border-radius: 10px;
border: 2px solid;
text-align:center;
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-4"><p style="background:#E9F9B9;">All-4</p></div>
<div class="col-xs-4"><p style="background:#ddd;">All-4</p></div>
<div class="col-xs-4"><p style="background:#E9FCF9;">All-4</p></div>
</div>
<div class="row">
<div class="col-xs-8 col-md-7 col-lg-6"><p style="background:lavender;">xs-4 md-7 lg-6</p></div>
<div class="col-xs-4 col-md-5 col-lg-6"><p style="background:#FFF1F4">xs-4 md-5 lg-6</p></div>
</div>
</div>
Using flexbox
If you use Bootstrap 4, you don't need CSS code.
*{
box-sizing: border-box;
}
.flex-container{
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color: lavender;
}
.col-4,.col-8{
position: relative;
width: 100%;
padding-right: 5px;
padding-left: 5px;
box-sizing: border-box;
}
.col-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-8{
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.flex-container > div div{
background:#E4F1F6;
padding:2px 6px;
margin:5px;
}
<div class="flex-container">
<div class="col-4"><div>1</div></div>
<div class="col-4"><div>2</div></div>
<div class="col-4"><div>3</div></div>
</div>
<div class="flex-container">
<div class="col-8"><div>A</div></div>
<div class="col-4"><div>B</div></div>
</div>
B
.flex-container {
display: flex;
align-items: stretch;
}
.flex-container > div {
background-color: lavender;
color: black;
margin: 3px;
text-align: center;
width: 33.3%;
line-height: 75px;
font-size: 30px;
}
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 1">3</div>
</div>
<div class="flex-container">
<div style="flex-grow: 2; width: 67%;">A</div>
<div style="flex-grow: 1">B</div>
</div>
You are basically doing exactly what you should. You want the bootstrap md-X columns to handle most of the formatting.
However, your inner elements are what you want to align, more specifically you should probably add some:
https://www.w3schools.com/code/tryit.asp?filename=G8K0XRXB2V8B
And the html / CSS to get it to look this way:
<style>
.filler {
border-radius: 15px;
border-style: solid;
}
</style>
<div class="container-fluid">
<h1>Hello World!</h1>
<p>Resize the browser window to see the effect.</p>
<p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
<div class="row wide-fill">
<div class="col-sm-4 spacy" style="background-color:lavender;">
<div class="filler">.col-sm-4</div>
</div>
<div class="col-sm-4 spacy" style="background-color:lavenderblush;">
<div class="filler">.col-sm-4</div>
</div>
<div class="col-sm-4 spacy" style="background-color:lavenderblush;">
<div class="filler">.col-sm-4</div>
</div>
</div>
<div class="row">
<div class="col-sm-8 spacy" style="background-color:lavender;">
<div class="filler">.col-sm-8</div>
</div>
<div class="col-sm-4 spacy" style="background-color:lavenderblush;">
<div class="filler">.col-sm-4</div>
</div>
</div>
</div>
I'm trying to make a grid of 5 boxes (divs) where the first one has a portrait layout, and the rest have half the height of the first one (screenshot below)
My HTML looks like this:
<div class="container">
<div class="row">
<div class="col-md-4 portrait"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
It would have been easy using float:left and display block, but i'm using bootstrap 4 which uses flexbox so no support for float left and i can't get it to work as expected. Is there a way to do this even with flexbox ?
PS: the row div has flex-wrap: wrap;
.row {
display: flex;
flex-wrap: wrap;
flex-direction: column;
display: -webkit-flex;
-webkit-flex-wrap: wrap;
-webkit-flex-direction: column;
height: 200px;
justify-content: flex-start;
}
.col-md-4 {
flex: 0 0 50%;
-webkit-flex: 0 0 50%;
background: green;
}
.portrait {
-webkit-flex: 0 0 100%;
flex: 0 0 100%;
background: blue;
}
.red {
background: red;
}
<div class="container">
<div class="row">
<div class="col-md-4 portrait"></div>
<div class="col-md-4 red"></div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
<div class="col-md-4 red"></div>
</div>
</div>
You can use the following to achieve the results displayed in your image.
<div class="container">
<div class="row">
<div class="col-md-6 portrait">PUT YOUR PORTRAIT CONTENT HERE</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-6">TOP LEFT AFTER PORTRAIT</div>
<div class="col-md-6">TOP RIGHT AFTER PORTRAIT</div>
</div>
<div class="row">
<div class="col-md-6">BOTTOM LEFT AFTER PORTRAIT</div>
<div class="col-md-6">BOTTOM RIGHT AFTER PORTRAIT</div>
</div>
</div>
</div>
</div>
This is done by creating a new row, inside of a col, which is itself inside of another row.
I'm generating cards in my *ngFor div.
It is generating them vertically (down), but I want angular to generate them horizontally (right).
My idea was to put the class col-6, but that doesn't work, it just puts half of the card under each other.
This is the code:
<div class="card-body">
<div class="card" *ngFor="let BLA of PACKAGE.blas; let index=index" class="p-1">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-12">
{{bla.somethingone}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingtwo}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingthree}}
</div>
</div>
</div>
</div>
</div>
This is what I have:
And I want this:
I tried adding col-6 to the classes but it doesn't respond.
How can I achieve this effect ?
That has nothing to do with Angular, use a display: flex on the card-body and set flex-wrap: wrap; and flex-direction: row;:
.card-data {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.card {
width: 40%;
height: 100px;
line-height: 100px;
background-color: grey;
margin: 10px;
color: white;
text-align: center;
vertical-align: middle;
}
<div class="card-data">
<div class="card">
card 1
</div>
<div class="card">
card 2
</div>
<div class="card">
card 3
</div>
</div>
Change parent div class to row and add class col-6 to card row where your loop running
<div class="row">
<div class="card col-6 p-1" *ngFor="let BLA of PACKAGE.blas; let index=index">
<div class="card">
<div class="card-header">
Header
</div>
<div class="card-body">
<div class="form-group row">
<div class="col-12">
{{bla.somethingone}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingtwo}}
</div>
</div>
<div class="form-group row">
<div class="col-12">
{{bla.somethingthree}}
</div>
</div>
</div>
</div>
</div>
You also have extra card div under loop, remove that for clean design.
I've seen this thread but its for 2 column (col-md-6) and I've tried the jsfidlle too for 3 column but column 1st and column 2nd become stack.
Bootstrap 3 Align Text To Bottom of Div
what I want for my project is
.row {
position: relative;
}
.bottom-align-text {
position: absolute;
bottom: 0;
right: 0;
}
<div class="container">
<div class="row">
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
<div class="col-sm-4">
<img src="//placehold.it/600x300" alt="Logo" class="img-responsive"/>
</div>
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
</div>
</div>
how to make them both align bottom?
flexbox can do that
.row div {
border: 1px solid red;
}
.flexy {
display: flex;
text-align: center;
}
.flexy .bottom-align-text {
display: flex;
justify-content: center;
align-items: flex-end;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row flexy">
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
<div class="col-sm-4">
<img src="//placehold.it/600x300" alt="Logo" class="img-responsive" />
</div>
<div class="bottom-align-text col-sm-4">
<h3>Some Text</h3>
</div>
</div>
</div>
You can wrap column 1st and column 2nd in to a row then we'll have 2 columns structure. See my jsFiddle demo: https://jsfiddle.net/robinhuy/kg1ykfL1/3/