-1

I've tried reading:

What is the purpose of .row in Bootstrap? and http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works

However, none of of them explains why my columns in the following code do not float left:

<div class = "container">
    <div class = "col-2">
        1
    </div>
    <div class = "col-2">
        2
    </div>
</div>
Richard
  • 7,037
  • 2
  • 23
  • 76
  • Please refer to the Bootstrap 4 docs, and [how the Bootstrap 4 grid system works](https://uxplanet.org/how-the-bootstrap-4-grid-works-a1b04703a3b7). – Carol Skelly Jun 11 '18 at 14:18

2 Answers2

1

Because row has the following flex properties. In bootstrap 4 the grid works by using flex container. Since there will be no flex-container without the row div, the children inside it will not float as desired. (Although I must mention you that there is no actual float property used in creation of bootstrap4's grid )

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

Read this link on how bootstrap grid works.

Nandita Sharma
  • 13,287
  • 2
  • 22
  • 35
0

You have to add warp div with row class
because row set it flex and then it can be in same line
I reccomand you learn about flex:https://www.w3schools.com/Css/css3_flexbox.asp 

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class = "container">
<div class = "row">
    <div class = "col-sm-2">
        1
    </div>
    <div class = "col-sm-2">
        2
    </div>
</div>
</div>
לבני מלכה
  • 15,925
  • 2
  • 23
  • 47