Bootstrap 4 new feature in column System
07-11-2017    528 times
Bootstrap 4 column System

Bootstrap 4 new feature in column System

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.

Desktop Preview
Desktop Preview

<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>

Mobile Preview In bootstrap 3
Mobile Preview In bootstrap 3

<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>

Mobile Preview In bootstrap 4
Mobile Preview In bootstrap 4

Video Tutorials

softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post