I'm doing a carousel that will show some post ads recently posted. The div that contains the carousel is container , and the carousel elements are also container type. When I create grids inside other elements that are already part of another grid what should I do? Should I start with container and follow with row and col or should I do it otherwise?
Example:
Carouselelement:
For Boostrap 4
I DO NOT recommend that you use a container within the other. Even you do not need this to do this "nesting" with Grid, as you can consult directly in the official documentation on Nesting Grid
See that only COL-* can be a direct child of ROW
In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
To give the spacing you should use the native BS4 classes as p or m to margin and padding Here you have the official documentation link
NoticethatyoudonotneedCSSbeyondtheoriginalBS4,theonlythingIdidwithCSSwastoputthebackgroundcolors.Seethecodefortheimageabove:
.container {
background-color: purple;
}
.row {
background-color: cornflowerblue;
}
.col-3 {
background-color: tomato;
}
.col-9 {
background-color: yellow;
}
.col-12 {
background-color: silver;
}<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<div class="container">
<div class="row p-4">
<div class="col-3 p-4">
col-3
</div>
<div class="col-9 p-4">
<div class="col-12 mb-2">col-12</div>
<div class="col-12 mb-2">col-12</div>
<div class="col-12">col-12</div>
</div>
</div>
</div>If you're still using Bootstrap 3, see:
Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable .
PORTUGUESE
"Bootstrap requires an element that contains site content and hosts our grid system.You can choose one of the two containers to use in your projects.Note that due to the fill and more, no container is nested. "
Another point: Row > Container (this is wrong!)
Content should be placed within columns, and only columns may be immediate children of
rows.
PORTUGUESE
"Content should be placed inside columns and only columns can be immediate children of rows ."
Ouse be, only COL-* can be direct child of a ROW
Source of official documentation: link
It is necessary the container since it does not lose the margin of the container and is stuck to the sides. Example with container:
.roww {
height: 20px;
min-height:20px;
background-color: gray;
margin-bottom: 5px;
}
.image {
background-color: orange;
}
.rows {
background-color: yellow;
}<link href="http://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3 image">
</div>
<div class="col-sm-9 rows">
<div class="container">
<div class="row roww">
<div class="col-sm-12">
</div>
</div>
<div class="row roww">
<div class="col-sm-12">
</div>
</div>
<div class="row roww">
<div class="col-sm-12">
</div>
</div>
</div>
</div>
</div>
</div>Example without the container:
.roww {
height: 20px;
min-height:20px;
background-color: gray;
margin-bottom: 5px;
}
.image {
background-color: orange;
}
.rows {
background-color: yellow;
}<link href="http://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-3 image">
</div>
<div class="col-sm-9 rows">
<div class="row roww">
<div class="col-sm-12">
</div>
</div>
<div class="row roww">
<div class="col-sm-12">
</div>
</div>
<div class="row roww">
<div class="col-sm-12">
</div>
</div>
</div>
</div>
</div>