in this blog show how to make four column of same webpage , using bootstrap.
let us see example,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Four Column equal width</title>
<meta charset="utf-8">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<h1>Four equal width columns</h1>
<p>in this example shows setting equal column using bootstrap.</p>
<div class="row">
<div class="col" style="background-color:lavender;">Column 1</div>
<div class="col" style="background-color:orange;">Column 2</div>
<div class="col" style="background-color:lavender;">Column 3</div>
<div class="col" style="background-color:lavender;">Column 4</div>
</div>
</div>
</body>
</html>
step 1) call bootstrap.min.js and bootstrap.min.css
step 2) create div class name 'container-fluid'
step 3) create 'col' class div , in above also increase class means you can create 10 or more class.
in any query please comment.
No comments:
Post a Comment