Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

W3.CSS - Building a Mobile App


Movies 2014

Frozen

The response to the animations was ridiculous.


The Fault in Our Stars

Touching, gripping and genuinely well made.


The Avengers

A huge success for Marvel and Disney.

Footer


Create a Basic Mobile Page

The pro version of W3.CSS is perfect for mobile apps. It is small and very fast.

Example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3pro.css">
<body>

<!-- Content here -->

</body>
</html>

Try It Yourself »



Add Content

Example (using classic HTML elements)

<div class="w3-container">
  <h1>Movies 2014</h1>
</div>

<div class="w3-cell-row">
  <div class="w3-cell">
    <img src="img_avatar.jpg">
  </div>
  <div class="w3-cell w3-container">
    <h3>Frozen</h3>
      <p>The response to the animations was ridiculous.</p>
  </div>
</div>

<div class="w3-container">
  <h3>Footer</h3>
</div>
Try It Yourself »

Example (using semantic HTML elements)

<header class="w3-container">
  <h1>Header</h1>
</header>

<div class="w3-cell-row">
  <div class="w3-cell">
    <img src="img_avatar.jpg">
  </div>
  <div class="w3-cell w3-container">
    <h3>Frozen</h3>
      <p>The response to the animations was ridiculous.</p>
  </div>
</div>

<footer class="w3-container">
  <h3>Footer</h3>
</footer>

</body>
</html>

Try It Yourself »


Add a Color Theme

Examples

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-blue.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-theme-red.css">
Try It Yourself »

Read more about color-themes in W3.CSS Color Themes.


Add More Style

Example

<img class="w3-circle" src="img_avatar.jpg" alt="avatar">

<h3 class="w3-text-theme">Frozen</h3>
Try It Yourself »

Add Side Navigation

Example

<nav class="w3-sidebar w3-bar-block w3-card" style="width:30%">
<div class="w3-red">
  <a href="javascript:void(0)" onclick="closeSidebar()"
  class="w3-button w3-display-topright w3-xlarge">X</a>
    <div class="w3-padding-large w3-center">
      <img class="w3-circle" src="img_avatar.jpg" alt="avatar">
   </div>
  </div>
<a class="w3-bar-item w3-button" href="#">Home</a>
<a class="w3-bar-item w3-button" href="#">Friends</a>
<a class="w3-bar-item w3-button" href="#">Messages</a>
</nav>

<script>
function openSidebar() {
  document.getElementById("mySidebar").style.display = "block";
}

function closeSidebar() {
  document.getElementById("mySidebar").style.display = "none";
}
</script>
Try It Yourself »

Fixed Navigation, Header and Footer

Example

<header class="w3-top">

<nav class="w3-top">

<footer class="w3-bottom">
Try It Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.