|
|
If you want to create your layout fast, you can use a CSS framework, like W3.CSS or Bootstrap. It is meant thirdpary css. Such as: Boostrap, W3css, Google Css etc.
Following is given a Example of CSS Frameworks Layout with Boostrap |
Example of CSS Frameworks Layout with Boostrap
Resize this responsive page to see the effect!
index.html
Example:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Output should be:
In this Layout we used CSS Framework from Boostrap.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
| What is HTML Layout | HTML Layout |
| What is HTML Layout Elements | HTML Layout |
| What is HTML Layout Techniques | HTML Layout |
| How to create CSS Frameworks Layout | HTML Layout |
| How to create HTML CSS Float Layout | HTML Layout |
| How to create HTML CSS Flexbox Layout | HTML Layout |
| How to create HTML CSS Grid Layout | HTML Layout |
| Example of CSS Frameworks Layout with Boostrap | HTML Layout |
Read Full: | HTML Layout |
Category: | Web Tutorial |
Sub Category: | HTML Layout |
Uploaded: | 1 year ago |
Uploaded by: | Admin |
Views: | 66 |
Reffered: https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_default&stacked=h