Loading lesson path
There are many free CSS Frameworks that offer Responsive Design. Using W3.CSS A great way to create a responsive design, is to use a responsive style sheet, like W3.CSS W3.CSS makes it easy to develop sites that look nice at any size! W3.CSS Demo Resize the page to see the responsiveness!
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Paris is the capital of France. The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo is the capital of Japan. It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
<!DOCTYPE html> <html> <meta name="viewport"
Formula
content ="width = device - width, initial - scale = 1"><link rel="stylesheet"
Formula
href ="https://www.w3schools.com/w3css/4/w3.css"><body>
Formula
< div class ="w3 - container w3 - blue">
< h1 > W3Schools Demo </h1 >
< p > Resize this responsive page!</p ></div>
Formula
< div class ="w3 - row - padding">
< div class ="w3 - third">
< h2 > London </h2 >
< p > London is the capital city of England.</p >
< p > It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p ></div>
Formula
< div class ="w3 - third">
< h2 > Paris </h2 >
< p > Paris is the capital of France.</p >
< p > The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p ></div>
Formula
< div class ="w3 - third">
< h2 > Tokyo </h2 >
< p > Tokyo is the capital of Japan.</p >
< p > It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p ></div> </div> </body> </html> To learn more about W3.CSS, read our W3.CSS Tutorial.
Another popular framework is Bootstrap. It uses HTML and CSS to make responsive web pages:
<!DOCTYPE html> <html lang="en"> <head>
Formula
< 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/bootstrap@5.3.3/dist/css/bootstrap.min.css"rel="stylesheet">
Formula
< script src ="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script ></head> <body>
Formula
< 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>
Formula
< div class ="container mt - 5"><div class="row">
Formula
< 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>
Formula
< 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>
Formula
< 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> To learn more about Bootstrap, go to our Bootstrap Tutorial.
? Here you can create your website from scratch or use a template. Get started for free ❯ * no credit card required