Creating Two Column Layouts
We can create two column layouts for large devices like laptop, desktops, tablets etc. But on small mobile devices the columns by default will be horizontal. Basically Bootstrap grid system is based on 12 columns and to keep the columns side by side,the sum of the grid columns in each row should be equal to 12 using col-sm-*.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style type="text/css">
/* Some custom styles to beautify this example */
.demo-content {
padding: 15px;
font-size: 18px;
min-height: 300px;
background: #dbdfe5;
margin-bottom: 10px;
}
.demo-content.bg-alt {
background: #abb1b8;
}
</style>
</head>
<body>
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-6">
<div class="demo-content">.col-sm-6</div>
</div>
<div class="col-sm-6">
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<hr>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-sm-4">
<div class="demo-content">.col-sm-4</div>
</div>
<div class="col-sm-8">
<div class="demo-content bg-alt">.col-sm-8</div>
</div>
</div>
<hr>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-sm-3">
<div class="demo-content">.col-sm-3</div>
</div>
<div class="col-sm-9">
<div class="demo-content bg-alt">.col-sm-9</div>
</div>
</div>
</div>
</body>
</html>
Output information
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Optional Bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style type="text/css">
/* Some custom styles to beautify this example */
.demo-content {
padding: 15px;
font-size: 18px;
min-height: 300px;
background: #dbdfe5;
margin-bottom: 10px;
}
.demo-content.bg-alt {
background: #abb1b8;
}
</style>
</head>
<body>
<div class="container">
<!--Row with two equal columns-->
<div class="row">
<div class="col-sm-6">
<div class="demo-content">.col-sm-6</div>
</div>
<div class="col-sm-6">
<div class="demo-content bg-alt">.col-sm-6</div>
</div>
</div>
<hr>
<!--Row with two columns divided in 1:2 ratio-->
<div class="row">
<div class="col-sm-4">
<div class="demo-content">.col-sm-4</div>
</div>
<div class="col-sm-8">
<div class="demo-content bg-alt">.col-sm-8</div>
</div>
</div>
<hr>
<!--Row with two columns divided in 1:3 ratio-->
<div class="row">
<div class="col-sm-3">
<div class="demo-content">.col-sm-3</div>
</div>
<div class="col-sm-9">
<div class="demo-content bg-alt">.col-sm-9</div>
</div>
</div>
</div>
</body>
</html>
Output information
No comments:
Post a Comment