Center two col-sm-6 in a row + some basic boostrap confusion - html

Question

I'm trying to teach myself how to effectively center things using bootstrap. Centering is something I really struggle with, even after reading a ton of other SO posts asking the same question.
Why do we have to wrap the cols in a row, and then wrap that row in a container? What does this actually do?
body {
background-color:pink;
}
.container {
overflow: hidden;
background-color: yellow;
}
.col-sm-6 {
float: left;
height: 100px;
width: 100px;
background-color: blue;
padding: 10px;
margin: 1%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "container">
<div class = "row">
<div class = "col-sm-6"></div>
<div class = "col-sm-6"></div>
</div>
</div>
JSFiddle

Answer 1

1 row have 12 cols for you're first code :
<div class = "container">
<div class = "row">
<div class = "col-sm-6"></div>
<div class = "col-sm-push-6"></div>
</div>
</div>
That means you're second div is after the first who takes 6 cols. So you push the second after the first (col-sm-push-6)
This is for the web-responsive, when you're website is on a computer or in a mobile phone, the screen have different size. Bootstrap adapt you're div to the screen.
They're is sm : for small screen, lg : for large screen and md : for middle screen like a tab for exemple.

Answer 2

Let me explain for you. I love to teach beginners :-)
Firstly when we use column of bootstrap it adds '15px' padding from
right and left. in this way our column looks like '15px' inside from
wall of container.
Secondly we use row to overcome the first situation given upper paragraph.
Thirdly if you are trying to align Centre 2 columns of 6 and 6 then it is impossible to do this because 2 col-sm-6
occupy whole container space.
Fourthly do r&d about bootstrap offset and push properties. also check bootstrap row and columns properties by using code inspector. thanks

Answer 3

If you use bootstrap, there is class ready made to build your layout :
https://getbootstrap.com/docs/4.0/utilities/flex/
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.
If you need cols of a fixed width, you might need to create your own class here .
example:https://jsfiddle.net/cLw2ajro/7/
body {
background-color: pink;
}
.container {
overflow: hidden;
background-color: yellow;
}
.mycol {
background-color: blue;
height:100px;
flex:0 0 100px
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row d-flex flex-nowrap justify-content-center">
<div class="mycol m-2 p-4"></div>
<div class="mycol m-2 p-4"></div>
</div>
</div>

Answer 4

Try this
CSS:
body {
background-color:pink;
}
.row-centered {
display:block;
text-align:center;
}
.col-centered {
display:inline-block;
float:none;
/* reset the text-align */
text-align:left;
/* inline-block space fix */
}
.container {
overflow: hidden;
background-color: yellow;
}
.col-sm-6 {
height: 100px;
max-width:100px;
background-color: blue;
padding: 10px;
margin: 1%;
}
HTML
<div class = "container">
<div class = "row row-centered">
<div class = "col-sm-6 col-centered">-</div>
<div class = "col-sm-6 col-centered">-</div>
</div>
</div>
Fiddle
Source: This question