W3CSS Slideshow

Slideshow or carousel is one of the most important element of any modern website. A carousel or slideshow is a set of images, that manually or automatically appear one by one on the screen in the form of a slide show. It is very easy to create a slideshow affect via W3CSS slideshow classes.

Creating Manual W3CSS Slideshow

The first step is to wrap all the images inside a div with class “w3-content” and “w3-display-container” class. The next step is to create two buttons. One for moving the slides backwards and the other for moving the slide forward. Also, some JavaScript code is required to make slideshow work.

Initially, take a variable and assign it a value of “1” and call showDivs function. Pass the variable to this showDivs function. Each image has a class “AllSlides”. The “showDiv” JavaScript function will get all the images with class “AllSlides” and then display the slide whose index is currently passed to it. If the index is greater than the number of slides the index will be set to 1. If the index is less than zero, it will be set to the number of index i.e. the index of the last slide. On each next click, the index is incremented and showDivs function is called. Similarly, on each back click, the index is decremented and again showDivs fuction is called. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


    
<div class="w3-content w3-display-container">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/c76/inside-castle-1056995.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/bda/grill-1056427.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/7ea/barbeque-1325699.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/7c9/barbeque-on-my-mind-1329952.jpg" style="width:100%">

  <button class="w3-button w3-yellow w3-display-left" onclick="changeDivs(-1)">&#10094;</button>
  <button class="w3-button w3-yellow w3-display-right" onclick="changeDivs(1)">&#10095;</button>
</div>

<script>
var slideNum = 1;
showDivs(slideNum );

function changeDivs(i) {
  showDivs(slideNum  += i);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("AllSlides");
  if (n > x.length) {slideNum  = 1}    
  if (n < 1) {slideNum  = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideNum -1].style.display = "block";  
}
</script>


</body>
    
</html>

Download the code Try the code

Creating Automatically Moving Carousel

The process of creating automatically moving slideshow is similar to example1. However, in this case there is no need of next and previous buttons. Rather there will be a timer inside JavaScript function which will recursively call itself after every two seconds and will update the slide. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-content w3-display-container">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/c76/inside-castle-1056995.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/bda/grill-1056427.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/7ea/barbeque-1325699.jpg" style="width:100%">
  <img class="AllSlides" src="http://images.freeimages.com/images/previews/7c9/barbeque-on-my-mind-1329952.jpg" style="width:100%">

<script>
var myIndex = 0;
slideShow();

function slideShow() {
    var i;
    var x = document.getElementsByClassName("AllSlides");
    for (i = 0; i < x.length; i++) {
       x[i].style.display = "none";  
    }
    myIndex++;
    if (myIndex > x.length) {myIndex = 1}    
    x[myIndex-1].style.display = "block";  
    setTimeout(slideShow, 2000); // Change image every 2 seconds
}
</script>


</body>
    
</html>

Download the code Try the code

W3CSS Effects

In this article we are going to study some of the most fancy W3CSS effects that you can add to your images. These W3CSS effects include opacity effects, grayscale effects sepia effects and hover effects. It is extremely difficult to create these effects without W3CSS and would require lots of extensive JavaScript coding. Though we studied some of these effects in image article, it is important that we dedicate a separate section to it.

Adding Opacity to Images

Often times you need to add opacity to the image to create a certain effect. W3CSS uses w3-opacity, w3-opacity-min and w3-opacity-max classes to add opacity to an image. Take a look a the following example where these three types of opacities have been added to an image.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
 <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun" >
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-opacity-min" >

        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-opacity" >
    
        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-opacity-max" >
</body>
    
</html>

Download the code Try the code

Creating Grayscale Images

Often times you need to create grayscale images. W3CSS uses w3-grayscale, w3-grayscale-min and w3-grayscale-max classes to create grayscale images. Take a look a the following example where these three types of grayscale images have been created

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
 <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun" >
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-grayscale-min" >

        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-grayscale" >
    
        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-grayscale-max" >
</body>
    
</html>

Download the code Try the code

Creating Sepia Image Effect

W3CSS uses w3-sepia, w3-sepia-min and w3-sepia-max classes to create sepia image effect. Take a look a the following example where these three types of sepia image effects have been created

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
 <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun" >
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-sepia-min" >

        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-sepia" >
    
        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-sepia-max" >
</body>
    
</html>

Download the code Try the code

If you open the above page in browser, you will see four images. The first image is normal image, the second image has minimal sepia effect, the next image has higher sepia effect while the fourth image has maximum sepia effect

Creating Hover Effects

You can also create opacity, grayscale and sepia effect on images when mouse is hovered over the image. To do so, add w3-hover-opacity, w3-hover-grayscale or w3-hover-sepia classes respectively to the images. Take a look at the following code.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
    
    <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-hover-opacity" >

        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-hover-grayscale" >
    
        <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="gun"
         class="w3-hover-sepia" >
</body>
    
</html>

Download the code Try the code

W3CSS Accordion

An accordion is a link, button or source element which when clicked opens a related section. An accordion, like drop down is a very good way of saving space on website. In this article we shall study W3CSS accordion.

A basic W3CSS Accordion

It is very easy to create a basic W3CSS accordion. You need a button or link, a section that opens when the button or link is clicked and some JavaScript that binds button’s click event with the section. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<button onclick="myFunction('home')" class="w3-button w3-blue w3-left-align">
Open Home</button>

<div id="home" class="w3-container w3-hide">
  <p>Welcome to Home Page.</p>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>


</body>
    
</html>

Download the code Try the code

In the above code, we have a button with blue background. When the button is clicked javascript function “myFunction” is called and the “home” is passed to the function. Next we have a section with id “home”. Inside the JavaScript “myFunction” the element whose id is passed is stored in a variable. If the variable doesnt have a “w3-show” class, this class is added to the list of classes of the element. This displays the element on screen. On the other hand, if the element already has “w3-show” class it is replaced by empty string, which hides the section.

Accordion with Multiple Sections

In the previous example, we had only one button and one corresponding section which opened or closed at button click. You can have as many accordions on one page as you like. The trick is to add sections with different ids and then pass those ids to the JavaScript function via button clicks. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<button onclick="myFunction('home')" class="w3-button w3-blue w3-left-align">
Home</button>

<div id="home" class="w3-container w3-hide">
  <p>Welcome to Home Page.</p>
</div>

    <br>
<button onclick="myFunction('about')" class="w3-button w3-red w3-left-align">
About</button>

<div id="about" class="w3-container w3-hide">
  <p>This is an about page.</p>
</div>
    <br>
<button onclick="myFunction('contact')" class="w3-button w3-yellow w3-left-align">
Contact</button>

<div id="contact" class="w3-container w3-hide">
  <p>Our contact number is XXXXXXXX.</p>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>


</body>
    
</html>

Download the code Try the code

Accordion With Highlighted Links

You can also highlight the button which is currently active accordion. The technique is to get the id of the button and add some color class if it doesnt already exist. If the color class already exists, it means the accordion is active. In such cases replace the color class with default color. The following example explains this concept.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<button onclick="myFunction('home')" class="w3-button w3-blue w3-left-align">
Home</button>

<div id="home" class="w3-container w3-hide">
  <p>Welcome to Home Page.</p>
</div>

    <br>
<button onclick="myFunction('about')" class="w3-button w3-blue w3-left-align">
About</button>

<div id="about" class="w3-container w3-hide">
  <p>This is an about page.</p>
</div>
    <br>
<button onclick="myFunction('contact')" class="w3-button w3-blue w3-left-align">
Contact</button>

<div id="contact" class="w3-container w3-hide">
  <p>Our contact number is XXXXXXXX.</p>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace("w3-blue", "w3-red");
    } else { 
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace("w3-red", "w3-blue");
    }
}
</script>


</body>
    
</html>

Download the code Try the code

W3CSS Code

It is very important requirement of some website that it should display code snippets. Take example of this website, it has to display lots of code samples along with explanations. It is very easy to display code samples via W3CSS code classes. In this article we shall see these classes in action. We shall study how to display code snippets within a website.

W3CSS Code with w3-code class

The basic class to use when you want to display your code snippet is the w3-code class. Add this class to a div and then inside the div add your code. Take a look at the following example

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-panel w3-card-2 w3-blue">
  <h3>Example</h3>
  <div class="w3-code">
    cars[0] = "Honda";<br>
    cars[1] = "Toyota";<br>
    cars[2] = "Audi";<br>
    cars[3] = "Suzuki";<br>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

In the above code sample, we created a panel and inside that panel we created a div with class “w3-code”. Now we can write our code snippet within this div. We created an array named car and assigned value to its first four indexes. If you open the above page in browser, you should see code wrapped inside a panel.

Highlighting code with “w3-codespan” class

The “w3-codespan” class is used to highlight the code. The technique is to wrap the code inside the “code” tag and then add “w3-codespan” class to the opening code tag. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-container">

  <p>The <code class="w3-codespan">html, header, body</code> are basic components of a web page..</p>
</div>


</body>
    
</html>

Download the code Try the code

Using W3CSS Color library For Highlighting Code

You can also use W3CSS online color library to highlight your code. The library is a javascript file and is located at “https://www.w3schools.com/lib/w3codecolor.js”. Simply download the file and add it as a script to header section of your code. Next to specify the type of highlighting you can use different classes. The technique is to wrap the code inside a div with class “w3-code”. Next, you add individual classes for javascript, html and css highlighting. For instance for JavaScript highlighting, add “jsHigh” class. Similarly for html and css highlighting add “htmlHigh” and “cssHigh” classes respectively. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<script src="w3codecolor.js"></script>
    
</head>
    
<body>


<div class="w3-code jsHigh">
    cars[0] = "Honda";<br>
    cars[1] = "Toyota";<br>
    cars[2] = "Audi";<br>
    cars[3] = "Suzuki";<br>
  </div>
    
      <div class="w3-code htmlHigh ">
    &lt;!DOCTYPE html&gt;<br>&lt;html&gt;<br>
    &lt;title&gt;Knowledge Hills&lt;/title&gt;<br>
    &lt;body&gt;<br><br>
    &lt;h1&gt;Welcome to Knowledge&lt;/h1&gt;<br>
    &lt;p&gt;Best Site for Programming tutorials.&lt;/p&gt;<br><br>
    &lt;/body&gt;<br>
    &lt;/html&gt;
  </div>

 <div class="w3-code cssHigh notranslate">
    body {<br>
    color: #blue;<br>
    }<br><br>

    h2 {<br>
    color: orange;<br>
    text-size: 20px;<br>
    }<br><br>

    p {<br>
    font-weight: bold;<br>
    }
  </div>

</body>
    
</html>

Download the code Try the code

W3CSS Rest, Percentage and Row Padding

In previous article we studied mixed layouts, we saw how to create mix layouts for mobile and desktop as well as mobile, tablet and desktop websites. In this article we are going to study the remaining layout concepts i.e., w3-rest, percentage widths and row padding.
The w3-rest is a class that is used to take up any remaining width in the row. Similarly, percentage properties are used to specify widths in percentage and finally w3-row-padding class is used to add some padding between columns inside a row.

Setting width using rest

You can use w3-rest class to occupy the remaining width of any container. Take a look at this example.

Download the code Try the code

In the above webpage, we have two divs inside the row div. The first div has a width of 200px. To second div we have added a class w3-rest. This will make the second div take remaining width of the row.

Setting width using percentage

You can also set the width of a container by setting width style property to a percentage value. The following exampled demonstrates this concept:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<div class="w3-row">
    <div class="w3-col w3-red" style="width:20%"><p>20%</p></div>
    <div class="w3-col w3-green" style="width:30%"><p>30%</p></div>
    <div class="w3-col w3-yellow" style="width:50%"><p>50%</p></div>
</div>


</body>
    
</html>

Download the code Try the code

In the above web page, there are three divs inside he row div. The first div has width of 20%, the second div has width of 30% while the last div has width of 50%. This is another way of setting widths of div apart from using column classes. However, these div widths remain same for all the screen sizes.

The Row Padding Class

To specify a row in W3CSS, we use w3-row class. However, w3-row class do not add any padding between the classes. Alternatively we can use w3-row-padding class which adds 8 pixels left and right padding between the columns inside the row. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col s4 w3-red">
    <p>This div covers 4 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
    <div class="w3-col s4 w3-green">
    <p>This div covers 4 columns on all screens</p>
  </div>
</div>
    
    <br>
    
<div class="w3-row-padding">
  <div class="w3-col s4 w3-red">
    <p>This div covers 4 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
    <div class="w3-col s4 w3-green">
    <p>This div covers 4 columns on all screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

W3CSS Mixed Grid layouts

In the previous article we saw how to create two and three columns equal and unequal grids. In this article we shall see how to create mixed grids. By mixes grid layouts we refer to layouts that look different on different screens. In this article we shall first create mixed layout for mobile and desktops and then for mobile, tablets and desktop. So let the fun begin.

Mixed Layout for Mobile and Desktop

To create mixed layout for mobile and desktop screens, you have to use two “s” and “l”. The former is used to specify column size for small screens or mobiles while the latter specifies screen size for large screens or desktop. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col s6 l4 w3-red">
    <p>This div covers 6 colum on small screens and  4 columns on large screens</p>
  </div>
  <div class="w3-col s6 l8 w3-blue">
    <p>This div covers 6 colum on small screens and 8 columns on large screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

In the following example we have a row that has two further divs. The first div takes 6 columns on the small screen and the second div also take 6 columns on the small screen. For large screen,the first div will take 4 columns i.e. 33% of the width and the second column will takes eight columns i.e. 66% of the width.

Mixed Layout for Mobile, Tablet & Desktop

To create mixed layout for mobile, tablet & desktop screens, you have to use two “s”, “m” “l”. The former is used to specify column size for small screens or mobiles while the latter specifies screen size for large screens or desktop. The “m” specifies screen size for medium class. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col s8 m6 l2 w3-red">
    <p>This div covers 8 colum on small, 6 colomns on medium and  2 columns on large screens</p>
  </div>
  <div class="w3-col s4 m6 l10 w3-blue">
    <p>This div covers 4 colum on small, 6 colomns on medium and  10 columns on large screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

In the following example we have a row that has two further divs. The first div takes 4 columns on the small screen and the second div takes 8 columns on the small screen. For medium screen or tablets,the first div will take 6 columns i.e. 50% of the width and the second column will also takes 6 columns i.e. 50% of the width. For large screen,the first div will take 2 columns i.e. 16.66% of the width and the second column will takes 10 columns i.e. 83.33% of the width.

W3CSS Grid Advanced

In the previous article, we started our discussion W3CSS grid. In this article we shall study some W3CSS grid advanced concepts. Let’s recapitulate what we already know. To create a responsive grid, we need to create a div with class “w3-row”. Inside the div, to create columns we need to create divs with class w3-col. And for each individual screen size we use classes such as sx, mx, and lx where s is for small, m is for medium, l is for large an x is the number of columns. In this article we shall see how to create two equal and unequal column grid as well as three equal and unequal column grid.

Two equal and unequal columns

In the following example we have a row that has two further divs. The first div takes 6 columns on the small screen and the second div shall also take 6 columns on the small screen. Since we have not specified the columns size for medium and large screen sizes. The column size for small screen will be applicable to them. Notice that if column size for a larger screen is not specified the column size for immediate smaller screen is applicable to larger screen as well. Therefore, column size for small screen will be applicable for large screen as well. Next, we again create a row that has two further div. The first div takes 4 columns on the small screen and the second div takes 8 columns on the small screen. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col s6 w3-red">
    <p>This div covers 6 columns on all screens</p>
  </div>
  <div class="w3-col s6 w3-blue">
    <p>This div covers 6 columns on all screens</p>
  </div>
</div>
    
    <br>
    
<div class="w3-row">
  <div class="w3-col s8 w3-red">
    <p>This div covers 8 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

Three equal and unequal columns

In the following example we have a row that has three further divs. All the three divs take 4 columns on the small screen. Next, we again create a row that has three further divs. The first div takes 2 columns, the second div takes four columns and the third div takes 6 columns on the small screen. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col s4 w3-red">
    <p>This div covers 4 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
    <div class="w3-col s4 w3-green">
    <p>This div covers 4 columns on all screens</p>
  </div>
</div>
    
    <br>
    
<div class="w3-row">
  <div class="w3-col s2 w3-red">
    <p>This div covers 2 columns on all screens</p>
  </div>
  <div class="w3-col s4 w3-blue">
    <p>This div covers 4 columns on all screens</p>
  </div>
    <div class="w3-col s6 w3-green">
    <p>This div covers 6 columns on all screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

W3CSS Grid

In one of our previous articles, we started our discussion about W3CSS layouts. We use classes like w3-third, w3-twothird etc to create responsive layouts. In the end of that article we also studied that W3CSS Grid system supports 12 columns. By 12 columns we mean that each row is further divided into 12 columns. And the number of columns taken up by a certain element depends upon screen size. This might sound bit tricky but the code samples in this article shall make it easier to understand.

W3CSS Grid system targets three screen sizes: small screens such as mobiles, medium screens such as tablets and large screens such as desktop. A responsive layout adjusts itself according to changing screen size. A row is created using w3-row class. Inside each row you can create maximum of 12 columns. A column is specified by w3-col class. Now for each screen size, w3CSS provides a different class.

For small size the class name starts with “s” followed by the number of columns to take. For instance the div with class s3 will take three columns on the small screen. For medium size the class name starts with “m” followed by the number of columns to take. For instance the div with class m3 will take three columns on medium screen. It is important to note that the sum of all the columns should be equal to 12. Lets take help of a simple example.

W3CSS Grid Example

In the following example we have a row that has two further divs. The first div takes 12 columns on the small screen and the second div shall also take 12 columns on the small screen because we have not specified the columns size for small screen. For medium screen,the first div will take 6 columns i.e. 50% of the width and the second column will also take 50% of the width. This is because both the first and second div has class m6. Finally on large, screen the first div will take 16.66% of the width because it has class l2. Similarly the second div will take 83.33% of the width since it has size l10. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-row">
  <div class="w3-col m6 l2 w3-red">
    <p>This div covers 12 colum on smal, 6 colomns on medium and  2 columns on large screens</p>
  </div>
  <div class="w3-col m6 l10 w3-blue">
    <p>This div covers 12 colum on smal, 6 colomns on medium and  10 columns on large screens</p>
  </div>
</div>


</body>
    
</html>

Download the code Try the code

Open the above page in browser, shrink the browser size to mobile size. You shall see both the red and blue div take whole screen.
Now gradually increase the size of browser, once it reaches medium size, both red and blue screen take half of the width of the window.
Finally increase the browser to desktop size, you shall see red div occupy 2 columns and blue div occupy 10 columns.

W3CSS Tooltip

Tool tips are small notes that describe something. Often times when you click on a button or an image a small floating text appears which contains information about the functionality of the button or what this image is. It is extremely easy to create W3CSS tooltip.
You have to use two classes w3-tooltip and w3-text. Use the class w3-tooltip in the opening tag of the element, with which you want to associate a tooltip. Next, mention the tooltip text in the span and add w3-tooltip class to this span. Take a look at the following code to understand this concept:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>
    
<p class="w3-tooltip">Italy is one of the best
<span class="w3-text">(<em>4 Football Worldcup Winner</em>)</span>
football side in Europe</p>



</body>
    
</html>

Download the code Try the code

Open the above webpage in the browser, you should see the text inside the paragraph. However, the text inside the span tag will not be visible at this time. Now hover mouse over the text, you shall see tooltip text appear. This is the basic version of tooltip.

Tooltip as Tag

You can create fancy tool tips if you want such as tooltips like tags etc. To create a tooltip in the form of tag, add w3-tag class to the span tag which contains the tooltip text. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

    
<p class="w3-tooltip">Italy is one of the best
<span class="w3-text w3-tag w3-blue">(<b>4 Football Worldcup Winner</b>)</span>
football side in Europe</p>


</body>
    
</html>

Download the code Try the code

Open the above webpage in the browser, you should see the text inside the paragraph. However, the text inside the span tag will not be visible at this time. Now hover mouse over the text, you shall see tooltip text appear in the form of a tag.

Image Tooltip

It is very easy to create an image tooltip. Simply wrap image within a div with class “w3-tooltip”. Rest of the process is similar.
Simply add tooltip text within a span tag. Take a look at the following code sample.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-tooltip">

  <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" alt="Car">
      <p class="w3-text">This is a beautiful picture.</p>
</div>


</body>
    
</html>

Download the code Try the code

W3CSS Modal Advanced

In the previous article, we started our discussion about modals. We saw what our essentials components of a modal and how they interact with each other. In this article, we shall see how to create a modal with header and footer content, how to create card modal and how to create image modal. So, let the fun begin.

Modal with Header and Footer

To create a Modal with header and footer, the rest of the process is similar. You have an event source, a w3-modal which acts as a container class and w3-modal-content class. Inside the div with class w3-modal-content class, create a header element for header content, followed by a simple div which acts a content. Finally, add a footer element for footer of the modal. You can style the header,content and footer element the way you want. Take a look at the following example to see modal with header and content in action.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <div onclick="document.getElementById('Modal1').style.display='block'" class="w3-blue w3-xlarge">Click to open Modal</div>

  <div id="Modal1" class="w3-modal">
    <div class="w3-modal-content">
      
        <header class="w3-container w3-orange"> 
        <span onclick="document.getElementById('Modal1').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>This is the header</h2>
      </header>
      <div class="w3-container">
        <p>Welcome to knowledge hills.</p>
        <p>Best tutorial site</p>
      </div>
      <footer class="w3-container w3-pink">
        <p>Copyright @ Knowledgehills.com</p>
      </footer>
        
    </div>
  </div>
</div>
    

</body>
    
</html>

Download the code Try the code

Modal as Cards

Like all the other elements, you can also give a card like look to a modal. To do so, simply add w3-card-number class to the div with class w3-modal-content. This gives a card like look to the modal window. Take a look at the following example.

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>

<div class="w3-container">
  <h2>W3.CSS Modal</h2>
  <div onclick="document.getElementById('Modal1').style.display='block'" class="w3-blue w3-xlarge">Click to open Modal</div>

  <div id="Modal1" class="w3-modal">
    <div class="w3-modal-content w3-card-8">
      
        <header class="w3-container w3-orange"> 
        <span onclick="document.getElementById('Modal1').style.display='none'" 
        class="w3-button w3-display-topright">&times;</span>
        <h2>This is the header</h2>
      </header>
      <div class="w3-container">
        <p>Welcome to knowledge hills.</p>
        <p>Best tutorial site</p>
      </div>
      <footer class="w3-container w3-pink">
        <p>Copyright @ Knowledgehills.com</p>
      </footer>
        
    </div>
  </div>
</div>
    

</body>
    
</html>

Download the code Try the code

Image Modal

Another very useful use of modal is developing an image gallery where images are initially shown in the small sizes. When a user clicks the image, they are displayed in the form of modal in a larger size. To create image modal, the rest of the process is similar. Simply replace the source which is usually a button or link with the image. The size of the image should be smaller. Then add the actual larger image inside the div with class w3-modal-content window. Bind the onclick event of the small image with this modal. Now, when you click the small window. A modal with image of larger size shall display. Take a look at the following code:

<!doctype html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    
</head>
    
<body>


<div class="w3-container">
  <h2>Modal Image Example</h2>
  <p>Click the Image to Display It in the form of Modal</p>

  <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" style="width:30%;cursor:zoom-in"
  onclick="document.getElementById('Modal1').style.display='block'">
    
    </div>

  <div id="Modal1" class="w3-modal" onclick="this.style.display='none'">
    <span class="w3-button w3-hover-blue w3-xlarge w3-display-topright">&times;</span>
    <div class="w3-modal-content w3-animate-zoom">
      <img src="http://images.freeimages.com/images/previews/d39/machinegun-1313031.jpg" style="width:100%">
    </div>
  </div>
</div>
    
    
    

</body>
    
</html>

Download the code Try the code

Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .