W3.CSS Intro

The w3-colorclasses are inspired by modern colors used in marketing, road signs, and sticky notes

W3.CSS Colors

The w3-color classes are inspired by modern colors used in marketing, road signs, and sticky notes:

W3.CSS Containers

The w3-container class is the most important of the W3.CSS classes. It provides equality like:

The w3-container class is typically used with HTML container elements, like:

<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more.

W3.CSS Panels, Notes, and Quotes

The w3-panel class can display all kinds of notes and quotes:

W3.CSS Alerts

The w3-panel class can also be used for all kinds of alerts:

W3.CSS Cards

The w3-card classes are suitable for both images and notes:

W3.CSS Tables

The w3-table classes can handle all kinds of tables:

W3.CSS Lists

The w3-ul class can handle all kinds of lists:

W3.CSS Buttons

The w3-button and w3-btn class provides buttons of all sizes and types.

Wide buttons:

Circular or square buttons:

W3.CSS Tags, Labels, Badges, and Signs

The w3-tag and the w3-badge classes are capable of displaying all kinds of tags, labels, badges and signs:

W3.CSS Responsive

The Responsive Grid classes provide responsiveness for all device types: PC, laptop, tablet, and mobile.

W3.CSS also supports a 12 column mobile-first fluid grid with small, medium, and large classes.

W3.CSS Display

The w3-display classes allow you to display HTML elements in specific positions:

W3.CSS Modals

The w3-modal class provides modal dialog in pure HTML:

Click to Open Modal

Modal Image:

W3.CSS Progress Bars

Read more at W3.CSS Progress Bars

Click Me

W3.CSS Dropdowns

The w3-dropdown classes provide dropdowns:

W3.CSS Accordions

Read more at W3.CSS Accordions

Open Section 1

Open Section 2

Open Section 3

W3.CSS Tabs

Tabbed Image Gallery (Click on one of the pictures):

function openImg(imgName) { var i, x; x = document.getElementsByClassName("picture"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(imgName).style.display = "block"; }

W3.CSS Navigation

The w3-bar class can be used to create a navigation bar:

Navigation bar with input:

Navigation bar with dropdown:

The w3-sidebar class creates a side navigation:

W3.CSS Pagination

W3.CSS provides simple ways for page pagination.

Slideshows

W3.CSS provide slideshows for cycling through images or other content:

Lightbox

Combine Modals and Slideshows to create a lightbox (modal image gallery):

W3.CSS Animations

The w3-animate classes provide an easy way to slide and fade in elements:

W3.CSS Images

Styling images in W3CSS is easy:

W3.CSS Effects

Add special effects to any element:

W3.CSS Input Forms

The w3-input classes are for input forms:

W3.CSS Filters

Use W3.CSS Filters to search for a specific element inside a list, table, dropdown, etc:

function myFunction2() { var input, filter, table, tr, td, i; input = document.getElementById('myInput'); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName('tr'); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName('td')[0]; if (td) { if (td.innerHTML.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ''; } else { tr[i].style.display = 'none'; } } } }

W3.CSS Fonts

With W3.CSS it is extremely easy to add fonts to a web page:

Making the web beautiful!

Making the web!

W3.CSS Tooltips

The w3-tooltip class can display all kinds of tooltips:

Hover over this text! Tooltip content

Hover over this text! Tooltip content

Color Themes

Color themes can easily be added to any web application:

// Slideshows var slideIndex = 1; function plusDivs(n) { slideIndex = slideIndex + n; showDivs(slideIndex); } function currentDiv(n) { showDivs(slideIndex = n); } function showDivs(n) { var i; var x = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demodots"); if (n > x.length) {slideIndex = 1} if (n < 1) {slideIndex = x.length} ; for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-white", ""); } x[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " w3-white"; } showDivs(1); // Lightbox (Modal and Slideshow) function openModalLight() { document.getElementById('myModalLight').style.display = "block"; } function closeModalLight() { document.getElementById('myModalLight').style.display = "none"; } var slideIndexLight = 1; showDivsLight(slideIndexLight); function plusDivsLight(n) { showDivsLight(slideIndexLight += n); } function currentDivLight(n) { showDivsLight(slideIndexLight = n); } function showDivsLight(n) { var i; var x = document.getElementsByClassName("mySlidesLight"); var dots = document.getElementsByClassName("demoLight"); var captionText = document.getElementById("captionLight"); if (n > x.length) {slideIndexLight = 1} if (n < 1) {slideIndexLight = x.length} for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" w3-opacity-off", ""); } x[slideIndexLight-1].style.display = "block"; dots[slideIndexLight-1].className += " w3-opacity-off"; captionText.innerHTML = dots[slideIndexLight-1].alt; } // Dropdown function myDropFunc() { var x = document.getElementById("Demodrop"); if (x.classList) { x.classList.toggle("w3-show"); } else { // Fallback for IE9 if (x.className.indexOf("w3-show") == -1) x.className += " w3-show"; else x.className = x.className.replace(" w3-show", ""); } } // Progress Bars function move() { var elem = document.getElementById("myBar"); var width = 1; var id = setInterval(frame, 10); function frame() { if (width == 100) { clearInterval(id); } else { width++; elem.style.width = width + '%'; elem.innerHTML = width * 1 + '%'; } } } // Tabs function openCity(evt, cityName) { var i; var x = document.getElementsByClassName("city"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } var activebtn = document.getElementsByClassName("testbtn"); for (i = 0; i < x.length; i++) { activebtn[i].className = activebtn[i].className.replace(" w3-red", ""); } document.getElementById(cityName).style.display = "block"; evt.currentTarget.className += " w3-red"; } // Accordions function myAccFunc(id) { var x = document.getElementById(id); if (x.classList) { x.classList.toggle("w3-show"); x.previousElementSibling.classList.toggle("w3-dark-grey"); } else { // Fallback for IE9 and earlier if (x.className.indexOf("w3-show") == -1) x.className += " w3-show"; else x.className = x.className.replace(" w3-show", ""); } } startAnim("Normal") function startAnim(animName) { var i; var x = document.getElementsByClassName("animTest"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(animName).style.display = "block"; }

// Click on a tab on load var mybtn = document.getElementsByClassName("testbtn")[0]; mybtn.click();