Spacing between col in row - css

Question

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>

Answer 1

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>

Answer 2

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>

Answer 3

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>