How to Replace col-xs-* in Bootstrap 4
On this page, find out how you can make a column equal to extra small. To make it work in Bootstrap 4, you need to replace the col-xs-* class with col-*.
Solution with col-*
Bootstrap 4 grid offers responsive classes to define on what screens a specified layout works.
The extra small class (col-xs) applies a grid column class to the element when the screen is narrower than 576px.
If you want to apply an extra small class in Bootstrap 4, one important thing to know is that col-xs-* is dropped in Bootstrap4. Instead, you need to use col-*.
Example of using col-* instead of col-xs-* in Bootstrap 4:
Example of using col- instead of col-xs- in Bootstrap 4**
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
</head>
<body>
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-12 text-center">
<h2>Example of col-12</h2>
</div>
</div>
</div>
</body>
</html>If you want to have a split into two equal parts, use col-6 as in the following example.
Example of using col-6 in Bootstrap 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous" />
</head>
<body>
<h1 class="text-center">Hello, world!</h1>
<div class="container">
<div class="row">
<div class="col-6 text-center">
<h2>example of col-6</h2>
</div>
<div class="col-6 text-center">
<h2>example of col-6</h2>
</div>
</div>
</div>
</body>
</html>