Container and Row Class in Bootstrap CSS tutorial
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--Below line is for making responsive website-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<!--If we make website which is not responsive then in mobile that website's fonts and images will shrink
that's why we use "shrink-to-fit=no"-->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Container and Row Class</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--Total width of Column Grid must be maximum 12 in one Row-->
<!-- 3 Bootstrap CSS Classes : Container, Row, Cols -->
<div class="container">Hello World</div><br><br>
<div class="container-fluid">Hello World</div><br><br>
<!-- "row" class must be inside "container" class as shown below -->
<div class="container">
<!--When we apply "row" class on div then div will become responsive-->
<div class="row">Row 1</div>
<div class="row">Row 2</div>
<div class="row">Row 3</div>
</div>
</body>
</html>
Below File is css/style.css File.
.container {
border: 8px solid #000000;
}
.container-fluid {
border: 8px solid #000000;
}
.row {
border: 5px solid #ff0000;
}
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment