Creating Multi-Column Layouts with Grid System
With the Bootstrap Grid System, we can control how the website looks in different types of devices with different screen sizes like phones, tablets, dekstop, etc. According to the device screen size, the placement of 12 content boxes varies. In a mobile device, which has small screen size, the layout of 12 boxes will be as one column and 12 rows. In a tablet, the layout will be as 2 columns and 6 rows. In devices like laptop and medium sized desktops, layout will look as 3 columns and 4 rows. Finally in desktops with large screen size, layout will look as 4 columns and 3 rows. The code will create a 3x4 grid layout with 3 columns and 4 rows for medium devices like laptop with screen width greather than or equal to 992 px to less than 1200 px.
Input code
save file index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
Output view
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Basic Bootstrap Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment