×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Place an image at the center of a page - Bootstrap 4
Bootstrap 4 new feature in column System - Bootstrap 4
2420    Arnab De    07/11/2017

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

Place an image at the center of a page - Bootstrap 4
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.
Enter New Comment
Comment History
No Comment Found Yet.
Albert Einstein
The only source of knowledge is experience.
Albert Einstein
3668
51.71
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     41743
01/01/2018     35913
28/06/2017     33955
25/06/2018     33202
02/08/2017     32306
06/07/2017     26716
01/08/2017     26706
15/05/2017     26325
14/07/2017     21730
21/04/2018     20623
softetechnologies