FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Bootstrap 4 beta version introduces huge collections of new classes. It also upgrades the classes of the previous versions. Here we discuss about an important change of bootstrap layout or column system.
In the traditional column system of the bootstrap we mention the size of the column along with the screen size. Now if we mention a class .col-md-6. Then it produces a 50% width column in a desktop or any other larger screen. But it automatically turns into 100% column size in the tablet or mobile screen. It caused change the display of the webpage in mobile.
But in bootstrap 4 a new concept is introduce to solve the problem. A new class called .col-6 is used in the place of .col-md-6 class. This class produce a 50% width column in every possible screen.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="asset/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4">
<div class="row">
<div class="col-md-6" style="background-color:#f00;color:#fff;">
sample Text 1
</div>
<div class="col-md-6">sample Text 2 </div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="asset/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="row">
<div class="col-md-8"></div>
<div class="col-md-4">
<div class="row">
<div class="col-6" style="background-color:#f00;color:#fff;">
sample Text 1
</div>
<div class="col-6">sample Text 2 </div>
</div>
</div>
</div>
</body>
</html>
