Skip to main content

Responsive Web Design - Frameworks

There are many free CSS Frameworks that offer Responsive Design.

Bootstrap​

A popular framework is Bootstrap. It uses HTML and CSS to make responsive web pages.

Example of a page with Bootstrap:

<!DOCTYPE html>  
<html lang="en">  
	<head>  
		<title>Bootstrap 5 Example</title>  
		<meta charset="utf-8">  
		<meta name="viewport"  content="width=device-width, initial-scale=1">  
		<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"  rel="stylesheet">  
		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>  
	</head>  
	<body>  
		<div class="container-fluid p-5 bg-primary text-white text-center">  
			<h1>My First Bootstrap Page</h1>  
			<p>Resize this responsive page to see the effect!</p>  
		</div>  
		<div class="container mt-5">  
			<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>

Table of Contents