La classe w3-border ajoute 4 bordures à l'élément.
w3-border-0 efface toutes les bordures.

w3-border-top ajoute une bordure en haut.
w3-border-bottom, une bordure en bas.
w3-border-left, à gauche.
w3-border-right, à droite.

w3-border-color, définit la color des bordures.

w3-leftbar, ajoute une grosse bordure à gauche.
w3-rightbar, une grosse à droite.
w3-topbar, une grosse en haut.
w3-bottombar, une grosse en bas.

w3-btn A rectangular button with a shadow hover effect. Default color is black.
w3-button A rectangular button with a gray hover effect. Default color is inherited from parent element.

La classe w3-button est "préférable" à w3-btn qui affiche un ombrage peu visible lors de son survol.

btn

button

Bouton large

Bouton oval

The w3-tag class creates a rectangular tag (label or sign). The default color is black

The w3-spin class can be used to let a sign spin 360 degrees

Tag rotatif spin

La classe w3-opacity-min donne une opacité de 25 %.
La classe w3-opacity donne une opacité de 50 %.
La classe w3-opacity-max donne une opacité de 75 %

opacité

opacité

opacité

La classe w3-wide rend l'écart entre lettres plus grand.

abcdefghijk

La classe w3-circle permet de mettre un contenu (texte, image) dans une ellipse

12345

The w3-badge class creates a "circular" badge. The default color is black.

12345

w3-animate-top Slides in an element from the top (-300px to 0)
w3-animate-bottom Slides in an element from the bottom (-300px to 0)
w3-animate-left Slides in an element from the left (-300px to 0)
w3-animate-right Slides in an element from the right (-300px to 0)
w3-animate-opacity Animates an element's opacity from 0 to 1, in 1,5 seconds.
w3-animate-zoom Animates an element from 0 to 100% in size
w3-animate-fading Animates an element's opacity from 0 to 1 and 1 to 0 (fades in + fade out) every 10 seconds (continuously)

w3-animate-top

w3-animate-bottom

w3-animate-left

w3-animate-right

w3-animate-opacity

w3-animate-zoom

w3-animate-fading

The w3-bar class is used to style an horizontal bar.

The w3-bar-block class is used to style a vertical bar.

The purpose of the w3-bar-item class is to provide correct spacing, padding, and positioning.

La classe w3-bar-item colle les boutons les uns aux autres.

La classe w3-hover-color est souvent associée à w3-bar-item.

L'attribut class="w3-bar-item w3-hover-color" est souvent associé à la balise <a> (pour créer un lien).

La classe w3-button est souvent associée à w3-bar-item lorsqu'elles sont associées à la balise <a> (pour faire disparaître le soulignement du lien).

La classe w3-mobile est souvent associée à w3-bar-item.

The w3-right class is perfect for making bar items right-aligned.

La classe w3-center peut aussi être associée à w3-bar.

Button bars can easily be used as navigation bars :

<div class="w3-bar w3-gray">
  <button class="w3-bar-item w3-black">Précédent<button>
  <a href="#" class="w3-bar-item w3-button w3-right">Suivant</a>
</div>

The w3-disabled class is used to create a disabled element.

If the element support the standard HTML disabled attribute - button, input, fieldset, optgroup, option, select, textarea- => class="w3-disabled" (CSS) = disabled="disabled" (HTML)

• The default font-size is 15px
• The default font is Verdana, which has a good letter spacing
• The default line-spacing (1.5) is also very good

Il est très facile d'ajouter des polices externes (à celles connues classiquement des navigateurs), généralement plus sophistiquées, telles que les polices manuscrites.

Il suffit ensuite d'utiliser la classe créée (comme n'importe quelle autre classe).

Pour remplacer les valeurs par défaut de la librairie w3.css, il suffit de charger son fichier CSS après [le fichier w3.css].

Google fonts

w3-padding-N
w3-padding-size

Les classes w3-padding-N sont des padding-top et padding-bottom.

w3-padding-16 vaut padding: 16px 0px
w3-padding-24 vaut padding: 24px 0px
w3-padding-32 vaut padding: 32px 0px
w3-padding-48 vaut padding: 48px 0px
w3-padding-64 vaut padding: 64px 0px

Les classes w3-padding-size, ci-dessous, sont des paddings (donc aussi padding-left et padding-right)

w3-padding-small correspond à 8px.
w3-padding correspond à 16px.
w3-padding-large correspond à 24px.

Margins

Toutes les classes margin correspondent à 16px.

w3-margin Adds a 16px margin to all sides of an element
w3-margin-top Adds a 16px top margin to an element
w3-margin-right Adds a 16px right margin to an element
w3-margin-bottom Adds a 16px bottom margin to an element
w3-margin-left Adds a 16px left margin to an element

w3-section Adds a 16px top and bottom margin to an element

La classe w3-table donne aux colonnes la même taille.

The w3-striped class is used to add zebra-stripes to a table.

The w3-bordered class adds a bottom border to each table row.

The w3-border class is used to display a border around a table.
The w3-border can be used on any HTML element.

w3-table-all = w3-table w3-striped w3-bordered w3-border

The w3-hoverable class adds a grey background color on mouse-over.
If you want a specific hover color, add any of the w3-hover-color classes to each <tr> element.

Les classes w3-table, w3-striped, w3-bordered, w3-border, w3-table-all, w3-centered, w3-hoverable s'appliquent à la balise <table>.

Souvent la balise <tr> contenant les balises <th> est associée à la classe w3-color.

The w3-centered class centers the content of the table.

The w3-responsive class creates a responsive table. The table will then scroll horizontally on small screens. When viewing on large screens, there is no difference.

The w3-ul class is used to display a basic list. Par défaut, les éléments de la liste sont séparés par une ligne horizontale.

Les classes w3-border, w3-center, w3-color, w3-hoverable et les 8 classes liées à la taille des lettres,  ... peuvent être associées à w3-ul
Et w3-hover-color, w3-padding-N, w3-padding-size aux balises <li>

La classe w3-ol n'existe pas. Lorsque la classe w3-ul est appliquée à la balise <ol>, la numérotation ne s'affiche pas.

• élément 1
• Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte.
• élément 1

w3-input affiche une ligne (au lieu d'un rectangle). The w3-input class has a bottom border by default. If you want a borderless input, add the w3-border-0 class.

The w3-animate-input class animates the width of an input to 100% when we click on.

Hover effect :

w3-check, w3-radio, w3-select

<select class="w3-select" name="option2">
  <option value="" disabled="disabled" selected="selected">
    Choose your option</option>
  <option value="1">Option 1</option>
  ...
</select>

The w3-cell class redefines block elements to display horizontally (like table cells) and has a very nice built-in self adjusting standard. Side-by-side elements will automatically adjust to the necessary width and also automatically self-adjust to equal height

The w3-cell-row is a container for cells (columns). The width of the w3-cell-row container defines the total width of all the contained cells. The default width is 100%.

w3-cell-top (default) Aligns content at the top of a cell (column).
w3-cell-middle Aligns content at the vertical middle of a cell (column).
w3-cell-bottom Aligns content at the bottom of a cell (column).

w3-mobile Adds mobile-first responsiveness to a cell (column).
Displays elements as block elements on mobile devices.

w3-dropdown-hover A hoverable dropdown element
w3-dropdown-content The dropdown part to be displayed

The w3-dropdown-hover class is perfect for creating navigation bars with dropdown menues.

The w3-dropdown-click class creates a clickable dropdown element. With this class, the dropdown is opened by JavaScript:

Dropdown with image, card, menu (animated), ...

Use the w3-right class to float the dropdown to the right. Use CSS to position the dropdown content (right:0 will make the dropdown menu go from right to left instead of left to right)

<div class="w3-dropdown-hover">
  <button class="w3-button">Hover Over Me!</button>
  <div class="w3-dropdown-content w3-bar-block w3-border">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    ...
  </div>
</div>

<div class="w3-dropdown-click">
  <button onclick="showHide('dropdownClick')"
    class="w3-button w3-black">Click Me!</button>
  <div id="dropdownClick" ...
    ...
  </div>
</div>

<div class="w3-dropdown-hover w3-right">
  <button class="w3-button">Dropdown</button>
  <div class="w3-dropdown-content w3-bar-block w3-border"
    style="right:0">
    <a href="#" class="w3-bar-item w3-button">Link 1</a>
    ...
  </div>
</div>

An accordion is used to show (and hide) HTML content. Use the w3-hide class to hide the accordion content. Use any kind of button to open and close the content

Accordion vs. Dropdown
Accordiaon : Content pushes the page content down Dropdown :Content lays over existing the page content

Accordion with image, card, menu (animated), list, .... Or, in sidebar, ...

<button onclick="showHide('accordion1')"
  class="w3-button w3-white">
  Open Section 1</button>
<div id="accordion1" class="w3-container w3-hide">
  <p>Some text ...</p>
</div>

Always Display the Sidebar

<!-- Sidebar -->
<div class="w3-sidebar w3-bar-block" style="width:25%">
  <h3 class="w3-bar-item">Menu</h3>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  ...
</div>

<!-- Page Content -->
<div style="margin-left:25%">

Open the Sidebar Navigation Over a Part of the Content

<div class="w3-sidebar w3-bar-block w3-border-right w3-hide"
 id="mySidebar">
  <button onclick="showHide('mySidebar')"
    class="w3-bar-item w3-large">Close ×</button>
  <a href="#" class="w3-bar-item w3-button">Link 1</a>
  ...
</div>

<!-- Page Content -->
<div class="w3-teal">
  <button class="w3-button w3-teal w3-xlarge"
   onclick="showHide('mySidebar')">&#9776;</button>

Open the Sidebar Navigation Over the Content

Collapsible Responsive Side Navigation

The w3-overlay class can be used to create an overlay effect when opening the sidebar. The w3-overlay class adds a black background with a 50% opacity to the "page content" - this effect will "highlight" the side navigation.

w3-hide-large

Slide the Page Content to the Right

<div class="w3-sidebar w3-bar-block" style="width:25%;right:0">

Right-sided Side Navigation

Right-sided Collapsible Navigation

Animated Sidebar

<div class="w3-sidebar w3-bar-block w3-animate-left">

<div class="w3-display-container" style="height:200px">
  <!-- Mes slides -->
  <img class="slidesManu w3-display-middle" src="w3css.gif" alt=""/>
  <div class="slidesManu w3-grey w3-display-middle">
    <p>paragraphe 1</p><p>paragraphe 222222222</p>
  </div>
  <!-- 2 boutons -->
  <button class="w3-button w3-black w3-display-left"
    onclick="changeSlide(-1)">&#10094;</button>
  <button class="w3-button w3-black w3-display-right"
    onclick="changeSlide(1)">&#10095;</button>
  <script src="w3slidesManu.js"></script>
</div>

<div class="w3-display-container" style="height:200px">
  <!-- slidesManu2 -->
  <img class="slidesManu2 w3-display-middle" src="w3css.gif" alt="" />
  <div class="slidesManu2 w3-grey w3-display-middle w3-animate-top">
    <p>paragraphe 1</p><p>paragraphe 222222222</p>
    <p>paragraphe 3 ligne 1 <br>ligne 2</p>
  </div>
  <div class= "w3-center w3-container w3-large
   w3-text-white w3-display-bottommiddle">
    <!-- 2 boutons + dots -->
    <button class="w3-button w3-black w3-left"
      onclick="changeSlide2(-1)">❮</button>
    <button class="w3-button w3-black w3-right"
      onclick="changeSlide2(1)">❯</button>
    <span class="w3-badge dot w3-border w3-transparent w3-hover-white"
      onclick="currentSlide(1)"
      style="height:13px;width:13px;padding:0"></span>
    <span class="w3-badge dot w3-border w3-transparent w3-hover-white"
      onclick="currentSlide(2)"
      style="height:13px;width:13px;padding:0"></span>
  </div>
  <script src="w3slidesManu2.js"></script>
</div>

<div class="w3-display-container" style="height:200px">
  <!-- slidesAuto -->
  <img class="slidesAuto w3-display-middle" src="w3css.gif" alt="" />
  <div class="slidesAuto w3-grey w3-display-middle">
    <p>paragraphe 1</p><p>paragraphe 222222222</p>
  </div>
</div>
<script src="w3slidesAuto.js"></script>

The w3-modal class defines a container for a modal.
The w3-modal-content class defines the modal content.

La page appelante est w3-opacity

Use any HTML element to open the modal. However, this is often a button, a link, a image, ...

Modal for Login Form

Open Modal

To display the modal as a card, add one of the w3-card-* classes to the w3-modal-content container

Use any of the w3-animate-zoom|top|bottom|right|left classes to slide in the modal from a specific direction

<p><button onclick="showHide('modal1')"
  class="w3-button w3-black">Open Modal</button></p>
<div id="modal1" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container w3-teal">
      <span onclick="showHide('modal1')" class=
        "w3-button w3-display-topright">×</span>
      <p>Modal Header</p>
    </div>
    <div class="w3-container">
      <p>Some text ...</p>
      <p>Some text ...</p>
    </div>
    <div class="w3-container w3-teal">
      <p>Modal Footer</p>
    </div>
  </div>
</div>

The w3-tooltip class defines the element to hover over (the tooltip container).
The w3-text class defines the tooltip text.

London (9 million inhabitants) is the capital of England.

<p class="w3-tooltip">London
<span class="w3-text">(<em>9 million inhabitants</em>)</span>
is the capital of England.</p>

Absolute Positioned Tooltip

London 9 million inhabitants is the capital of England.

<p class="w3-tooltip">London
  <span style="position:absolute;left:0;bottom:18px"
  class="w3-text w3-tag">9 million inhabitants</span>
 is the capital of England.</p>

Tooltip as a Tag

London 9 million inhabitants is the capital of England.

Image Tooltip

W3.CSS logo