THE WORLD'S LARGEST WEB DEVELOPER SITE

CSS Responsive Web Design


What is Responsive Web Design?

Responsive web design is to create web sites that look good on all devices.

Responsive web design is not a program or a JavaScript.

Responsive web design is a must for mobile devices.


Creating Your Own Responsive Design

One way to create a responsive design, is to create it yourself, with simple CSS:

<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
.article {
  float: left;
  margin: 5px;
  padding: 5px;
  width: 300px;
  height: 300px;
  border: 1px solid black;
}
</style>
</head>
<body>

<h1>W3Schools</h1>
<h2>Resize this responsive page!</h2>

<div class="article">
  <h3>About W3Schools</h3>
  <p>W3Schools is a web developer's site.
  It provides tutorials and references covering
  many aspects of web programming,
  including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.</p>
  <p>W3schools contains thousands of code examples.
  By using an online editor,
  readers can edit examples experimentally.</p>
</div>

<div class="article">
  <h3>Most Wanted Tutorials</h3>
  <p>HTML5 Tutorial</p>
  <p>How to build your web site with HTML5</p>
  <p>CSS3 Tutorial</p>
  <p>JavaScript Tutorial</p>
</div>

<div class="article">
  <h3>About This Demo</h3>
  <p>This demo is about responsive design.</p>
  <p>Try to make the page smaller or wider,
  to see responsive design in action.</p>
</div>

</body>
</html>
Try it Yourself »

Using Bootstrap

Another way to create a responsive design, is to use an already existing CSS framework.

Bootstrap is the most popular HTML, CSS, and JavaScript framework for responsive web design.

Bootstrap helps you develop sites that look nice at any size; screen, laptop, tablet, or phone:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
<div class="container">

<div class="jumbotron">
  <h1>W3Schools Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="row">
  <div class="col-md-4">
    <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>
  <div class="col-md-4">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>
  <div class="col-md-4">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</div>

</div>
</body>
</html>
Try it Yourself »

To learn more about Bootstrap read our Bootstrap Tutorial.