Creative Commons License This work is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.

Correction du TP 4 : Cette page vous présente exercice par exercice une correction du TP d'initiation à Bootstrap 4. Vous pouvez aussi télécharger une version complète du code corrigé en cliquant sur ce lien TP04_BootstrapCorrection.zip.

1: Intégrer Bootstrap4 à une page HTML

a) Récupérez sur votre disque le fichier tp04_Bootstrap.zip, décompressez le et ouvrez (dans Netbeans ou tout autre environnement de votre choix) le fichier maPage1.html qu'il contient.

b) afin de pouvoir utiliser les styles Bootstrap rajoutez dans la partie head de cette page le code suivant:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

c) verifiez que vous obtenez bien l'affichage suivant:

maPage1.html avec les styles par défaut Bootstrap
maPage1.html avec les styles par défaut Bootstrap.

Correction : pour pouvoir utiliser Bootstrap il faut tout d'abord intégrer les styles Bootstrap en insérant le lien vers la feuille de style CSS de Bootstrap (on trouve ce lien sur la page Getting Started de Bootstrap).

Le code HTML après l'insertion des styles :

<!DOCTYPE html>
<html>
    <head>
        <title>Ma 1ère page BS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
               integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
               crossorigin="anonymous">
    </head>
    <body>
        ...
    </body>
</html>

2: Comprendre la grille Bootstrap

On souhaite avoir un affichage responsif s'adaptant automatiquement à la taille de la fenêtre du navigateur et se comportant comme suit:

  • Les articles sont affichés sur un un fond de couleur bisque avec des bords arrondis (border-radius). Le texte des articles est placé avec une marge interne (padding) de 10 pixels.
  • Si la largeur de la fenêtre est plus grande ou égale à 768 pixels , les trois articles sont placés sur une même ligne et occupent une largeur identique.
  • Les sections sont affichées sur un un fond de couleur lavender avec des bords arrondis (border-radius). Le texte des sections est placé avec une marge interne (padding) de 10 pixels.
  • Si la fenêtre fait moins de 768 pixels de large, les sections sont placées les unes au dessous des autres, un espace de 10 pixels séparant les articles.
Affichage responsif de maPage.html
Affichage responsif de maPage1.html.

Question 1: modifiez le fichier maPage1.html pour obtenir un affichage identique à celui présenté dans la figure ci-dessus.

Correction : Dans un premier temps ajoutons les balises et les styles Bootstrap permettant de définir le positionnement en grille. En rouge les éléments ajoutés.

<html>
    <head>
        ...
    </head>   
    <body>
        <div class="container-fluid> <!-- définit une grille -->
            <h1>Ma première page bootstrap</h1>
            <div class="row"> <!-- définit une ligne pour les articles -->
                <div class="col-md-4"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
                <div class="col-md-4"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
                <div class="col-md-4"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
            </div>
            <hr>
            <div class="row"> <!-- définit une ligne pour les sections -->
                <div class="col-md-6"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <section>
                        ....
                    </section>
                </div>
                <div class="col-md-6"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <section>
                        ....
                    </section>
                </div>
            </div>
        </div>  
    </body>                       

Vous devriez obtenir l'affichage

mise en grille avec Bootstrap

Pour compléter ce premier exercice il suffit de définir des styles spécifiques pour les articles et sections. On placer la définition de ces styles dans un élément style défini dans l'élément head du document.

<!DOCTYPE html>
<html>
    <head>
        ...
        <!-- styles de bootstrap 4 récupérés sur un CDN -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
              integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" 
              crossorigin="anonymous"
              >
        <!-- styles pour la page -->
        <style>
            /* styles communs aux articles et aux sections */
            article, section  {
                padding: 10px;
                border-radius: 15px;
                margin-bottom: 10px;
                text-align: justify;
            }
            /* styles spécifiques aux articles */
            article {
                background-color: bisque;
            }
            /* styles spécifiques aux sections */
            section {
                background-color: lavender;
            }
        </style>
    </head>
    <body>
    ...

Question 2: Faire une copie du fichier maPage1.html vers maPage2.html et modifier celui-ci de sorte que (voir vidéo ci-dessous):

  • lorsque la largeur de la fenêtre est supérieure à 768px, les articles occupent respectivement 25%, 50% et 25% de la largeur de la fenêtre.
  • le reste du comportement des articles et sections demeure inchangé.

Correction : Il s'agit simplement de modifier le nombre de colonnes utilisées par les différents articles. Mais avant, créons une feuille de style permettant de partager les mêmes styles entre les deux pages HTML.

<html>
    <head>
        <title>Ma 2ème page BS</title>
        ...
        <!-- styles pour la page -->
        <link href="mesStyles.css" rel="stylesheet" type="text/css"/>
    </head>
    </head>   
    <body>
        <div class="container-fluid> <!-- définit une grille -->
            <h1>Ma deuxième page bootstrap</h1>
            <div class="row"> <!-- définit une ligne pour les articles -->
                <div class="col-md-3"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
                <div class="col-md-6"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
                <div class="col-md-3"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
            </div>
            <hr>
            <div class="row"> <!-- définit une ligne pour les sections -->
                ...
            </div>
        </div>  
    </body>                       

Le premier et le troisième article occupent la même largeur. On peut omettre de spécifier une largeur pour eux et donc remplacer

<div class="col-md-3">

par

<div class="col-md">

Question 3:

a) Faire une copie du fichier maPage2.html vers maPage3.html.

b) Découper en trois paragraphes le premier paragraphe de l'article 2.

Affichage responsif de maPage.html
Découpage en paragraphes de l'article 2 de maPage3.html.

Correction : En rouge, les modifications à apporter au fichier maPage3.html :

<html>
    <head>
        <title>Ma 3ème page BS</title>
        ...
    </head>   
    <body>
        <div class="container-fluid> <!-- définit une grille -->
            <h1>Ma Troisième page bootstrap</h1>
            <div class="row"> <!-- définit une ligne pour les articles -->
                <div class="col-md"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
                <div class="col-md-6"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                         <h2>Article 2 </h2>
                        <p>
                            Iamque lituis cladium concrepantibus internarum non celate ut antea
                            turbidum saeviebat ingenium a veri consideratione detortum et nullo 
                            inpositorum vel conpositorum.
                        </p>
                        <p>
                            Fidem sollemniter inquirente nec discernente
                            a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, 
                            et causarum legitima silente defensione carnifex rapinarum sequester et obductio.
                        </p> 
                        <p>
                            Capitum et bonorum ubique multatio versabatur per orientales provincias, 
                            quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella
                            Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.
                        </p>
                        <p>
                            In amicis eligendis neglegentis  esse nec habere quasi 
                            ...
                        </p>
                    </article>
                </div>
                <div class="col-md"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
            </div>
            <hr>
            <div class="row"> <!-- définit une ligne pour les sections -->
                ...
            </div>
        </div>  
    </body>                       

c) Modifier maPage3.html de façon à ce que les trois premiers paragraphes de Article 2 s'affichent en colonnes quelle que soit la largeur de la fenêtre.

Affichage responsif de maPage3.html
Affichage en colonnes des 3 premiers paragraphes de l'article 2 de maPage3.html.

Bootstrap permet l'imbrication (nesting) de grilles, voir la documentation officielle de Bootstrap sur les grilles : Nesting

Correction : Il suffit d'encadrer les 3 paragraphes par un élément ligne (row). En rouge, les modifications à apporter au fichier maPage3.html :

<html>
    <head>
        <title>Ma 3ème page BS</title>
        ...
    </head>   
    <body>
        <div class="container-fluid> <!-- définit une grille -->
            <h1>Ma Troisième page bootstrap</h1>
            <div class="row"> <!-- définit une ligne pour les articles -->
                <div class="col-md"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
                <div class="col-md-6"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                         <h2>Article 2 </h2>
                        
                        <div class='row'>
                            <!-- chaque paragraphe occupe 1/3 de la largeur de l'article
                              quelle que soit la largeur de la fenêtre d'affichage. On pourrait
                              utiliser .col-4, mais comme toutes les colonnes ont une largeur
                             indentique on peut tout simplement utiliser .col
                            -->
                            <div class='col'>
                                <p>Iamque lituis cladium concrepantibus internarum non celate ut antea
                                    turbidum saeviebat ingenium a veri consideratione detortum et nullo 
                                    inpositorum vel conpositorum.
                                </p>
                            </div>
                            <div class='col'>
                                <p>Fidem sollemniter inquirente nec discernente
                                    a societate noxiorum insontes velut exturbatum e iudiciis fas omne discessit, 
                                    et causarum legitima silente defensione carnifex rapinarum sequester et obductio.
                                </p>
                            </div>
                            <div class='col'>
                                <p>
                                    Capitum et bonorum ubique multatio versabatur per orientales provincias, 
                                    quas recensere puto nunc oportunum absque Mesopotamia digesta, cum bella
                                    Parthica dicerentur, et Aegypto, quam necessario aliud reieci ad tempus.
                                </p>
                            </div>
                        </div>
                        <p>
                            In amicis eligendis neglegentis  esse nec habere quasi 
                            ...
                        </p>
                    </article>
                </div>
                <div class="col-md"> <!-- définit une colonne, sa largeur et son point de rupture -->
                    <article>
                        ....
                    </article>
                </div>
            </div>
            <hr>
            <div class="row"> <!-- définit une ligne pour les sections -->
                ...
            </div>
        </div>  
    </body>                       

d) Sans modifier le code HTML, modifiez vos styles de manière à ce que ces trois paragraphes ne soient pas justifiés (il est donc interdit de modifier les balises <p> concernées en leur rajoutant une classe de style).

Affichage responsif de maPage3.html
Le texte des paragraphes en colonne n'est pas justifié.

Correction : Ajouter aux styles dans le fichier mesStyles.css la règle suivante :

/* style pour le contenu des colonnes qui sont dans une ligne imbriquée dans une ligne

   le sélecteur .row .col .col peut se lire comme suit (de la droite vers la gauche) un élément 
   avec la classe .col qui descend (directement ou indirectement) d'un élement avec la .row 
   qui lui même descend (directement ou indirectement) d'un élément avec la classe .row
*/
.row .row .col {
    text-align:left;
}

3. Images responsives

Question 1: dans la page maPage3.html insérez entre les deux paragraphes de l'article 1 l'image 700px-Campus_de_Grenoble.jpg (elle se trouve dans le répertoire images de votre répertoire TP04-Bootstrap).

insertion d'une image maPage3.html
Insertion d'une image dans l'article 3.

Réaffichez la page. Que constatez vous ?

Correction : pour insérer l'image :

                ...
                <div class="col-md">
                    <article>
                        <h2>Article 1</h2>
                        <p>Ideo urbs venerabilis post superbas efferatarum gentium cervices 
                            oppressas latasque leges fundamenta libertatis et retinacula sempiterna 
                            velut frugi parens et prudens et dives Caesaribus tamquam liberis suis
                            regenda patrimonii iura permisit.
                        </p>
                        <img src="images/700px-Campus_de_Grenoble.jpg" alt="campus UGA"/>
                        <p>Sed (saepe enim redeo ad Scipionem, cuius omnis sermo erat de amicitia)
                            querebatur, quod omnibus in rebus homines diligentiores essent.
                        </p>
                    </article>
                </div>
                ...

Au niveau de l'affichage, on constate que la largeur de la colonne de l'article 1 s'adpate pour intégrer toute l'image et que lorsque la largeur de la fenêtre du navigateur n'est pas suffisante l'article 3 (puis l'article deux) sont affiché sur la ligne suivante.

Si on spécifie explictement un largeur de colonne pour l'article 1 en remplaçant

<div class="col-md">

par

<div class="col-md-3">

on rétablit bien l'affichage en ligne des 3 articles, mais l'image dépasse de la colonne de l'article 1.

Question 2: en utilisant les styles de Bootstrap faites en sorte que la taille de l'image s'adapte automatiquement à celle de son conteneur comme montré sur la vidéo ci-dessous.


  • La documentation officielle de Bootstrap sur les images : Images
  • Le tutorial de w3schools sur les images: Bootstrap 4 images

Correction : il suffit de doter l'image du style img-fluid

<img src="images/700px-Campus_de_Grenoble.jpg" class="img-fluid" alt="campus UGA"/>

Question 3: comme indiqué sur la figure ci-dessous intégrez l'image de la chaîne des Belledonnes dans l'article 2, et l'image de Joseph Fourier dans l'article 3. Faites en sorte, que en plus d'adapter automatiquement leur taille à celle de leur conteneur, ces images aient respectivement un effet de vignette pour les deux premières et un découpage circulaire pour la troisième.

insertion d'une image maPage3.html
Insertion d'images dans les articles 2 et 3.

Correction : Pour les deux premières images il suffit de leur associer la classe bootstrap .img-thumbnail qui permet de dire que la taille de l'image s'adapte à la largeur de son conteneur (l'article) et qu'en plus un effet de vignette lui est appliqué.

...
<img src="images/700px-Campus_de_Grenoble.jpg" class="img-thumbnail" alt="campus UGA"/>
...

<img src="images/7Belledonne_Panorama_From_Biviers.jpg" class="img-thumbnail" alt="chaîne des belledonnes"/>

Pour l'image de Joseph Fourier la classe bootstrap .img-fluid permet de dire que la taille de l'image s'adapte à la largeur de son conteneur (l'article). La classe .rounded-circle indique que l'image est découpée selon une ellipse.

...
<src="images/490px-Joseph_Fourier.jpg" class="img-fluid rounded-circle" alt="Joseph Fourier"/>
...

4. Barre de navigation

On souhaite maintenant doter les pages du site d'une barre de navigation permettant de passer rapidement d'une page du site à une autre comme le montre la vidéo ci-dessous.


Question 1: ajoutez à vos pages d'une barre de navigation, en respectant les contraintes suivantes:

  • barre de navigation noire avec texte blanc,
  • l'item correspondant à la page active est en blanc, les autres items sont en gris,
  • lorsque la souris est déplacée au dessus d'un item autre que celui de la page active, sa couleur s'éclaircit,
  • lorsque la fenêtre n'est pas assez large pour tous les afficher en ligne, les items s'empilent les uns au dessus des autres.
barre de navigation
Barre de navigation.

Bootstrap permet de géréer très facilement des barres de navigation en utilisant les éléments HTML <nav>, <ul> et <li> et en les stylant de manière appropriée.

Pour en savoir plus:

La barre de navigation peut être construite à l'aide d'une liste non numérotée, chaque item correspondant à un élément de navigation. Cette liste est placée dans un éément nav. La mise en forme est ensuite obtenue en appliquant les styles Bootstrap adéquats.

...
    </head>
    <body>
        <!-- La bare de navigation -->
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="#">Page 1</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="maPage2.html">Page 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="maPage3.html">Page 3</a>
                </li>
            </ul>
        </nav>
        <!-- le contenu de la page est dans un grille bootstrap -->
        <div class="container-fluid">
            <!-- h1 qui suit est un élément bloc, il occupera toute la largeur du container -->
            <h1>Ma première page bootstrap</h1>

Dans les autres pages, on reportera également cette barre de navigation en modifiant simplement l'élément actif et les liens hypertexes. Par exemple pour maPage2.hml on aura :

...
    </head>
    <body>
        <!-- La bare de navigation -->
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="maPage1.html">Page 1</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="#"">Page 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="maPage3.html">Page 3</a>
                </li>
            </ul>
        </nav>
        <!-- le contenu de la page est dans un grille bootstrap -->
        <div class="container-fluid">
            <!-- h1 qui suit est un élément bloc, il occupera toute la largeur du container -->
            <h1>Ma première page bootstrap</h1>

Très souvent, on préférera sur des écrans très petits remplacer les liens de navigation par un bouton qui ne les fera apparaître que lorsque l'on clique dessus, comme le montre la vidéo ci-dessous.


Question 2: modifiez vos barres de navigation de manière à ce que les items soient automatiquement remplacés par un bouton lorsque la largeur de la fenêtre n'est pas suffisante.

barre de navigation
Navigation avec un bouton lorsque la fenêtre est trop étroite.

La encore bootstrap offre tout ce qu'il faut pour réaliser facilement cet effet.

Pour en savoir plus:

  • Dans la documentation officielle de Bootstrap 4 sur les barres de navigation: Responsive behaviors
  • Dans tutorial de w3schools sur les barres de navigation, allez à la section Collapsing The Navigation Bar: Navigation Bars

danger Pour que le bouton soit pleinement fonctionnel, pensez à intégrer les composants JavaScript de JQuery, Poppers et Bootstrap dans vos pages. Pour inclure ces scripts, reportez-vous à la section qui leur est consacrée dans la page d'accueil de la documentation Bootstrap.

Correction : Il faut rajouter un bouton qui apparaitra quand la fenêtre est trop étroite et de même englober la liste des item de la barre de navigation dans un élément div qui disparaitra lorsque la fenêtre est trop étroite.

Pour que ces comportements fonctionnent il faut penser à intégrer le code javascript de Bootstrap et de JQuery et Poppers (utilisés par Bootstrap). Ceci est fait à la fin de l'élément body.

...
    </head>
    <body>
        <!-- La bare de navigation -->        
	<!-- quand la fenêtre est trop étroite les items sont automatiquement remplacés par un bouton -->
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark ">
            <!-- Toggler/collapsibe Button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse"
                     data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navbar links -->
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">Page 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="maPage2.html">Page 2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="maPage3.html">Page 3</a>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- le contenu de la page est dans un grille bootstrap -->
        <div class="container-fluid">
            <!-- h1 qui suit est un élément bloc, il occupera toute la largeur du container -->
            <h1>Ma première page bootstrap</h1>
            ...
        <div>
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous">
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" 
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
             integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
             crossorigin="anonymous">
        </script>
    </body>  
</html>  

Question 3: modifiez vos barres de navigation de manière à ce qu'elles restent fixes en haut de la fenêtre du navigateur même lorsque l'utilisateur effectue un défilement vertical (scroll) dans la page.


Correction : Il suffit de rajouter la classe fixed-top aux styles de l'élément nav.

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">

5. Tables

Dans cet exercice vous allez utiliser bootstrap pour mettre en forme facilement une table HTML.

Question 1: rajoutez la page maPage4.html à votre site.

  1. Téléchargez la page et enregistrez la dans votre site (en effectuant par exemple un clic droit sur le lien ci-dessus et en choissant 'Enregistrer la cible du lien sous' dans le menu contextuel (Firefox)).

  2. Modifier la page pour lui intégrer les mêmes styles que les autres pages ainsi que la barre de navigation.

Vous devriez alors obtenir l'affichage suivant :

table avec les styles bootstrap par défaut
table avec les styles bootstrap par défaut

Question 2: en utilisant les styles css faites en sorte que la table s'affiche comme indiqué ci-dessous. Dans la mesure du possible, utilisez au maximum les styles proposés par Bootstrap pour la mise en forme des tables.

table mise en forme avec les styles bootstrap
table mise en forme avec les styles Bootstrap

Cet exercice à pour but de vous apprendre à chercher par vous même dans les tutoriaux de w3schools et dans la documentation de Bootstrap4. Sachez que les effets demandés (dans cet exercice et le suivant) peuvent être entièrement obtenus par les styles prédéfinis de Bootstrap. Le seul style que vous devriez être amenés à définir concerne le centrage du texte dans les cellules du tableau.

Correction : Il suffit de rajouter à l'élément table la classe table et l'élément tr que l'on veut particulariser avec une couleur de fond bleu clair la classe table-info.

...
<table class="table">
    ...
    <tr class="table-info">
        <th colspan="14">
            <small> ↓ Normales climatiques 1981-2010 (°C) ↓ </small>
        </th>
    </tr>
     ...
</table>

Question 3: Faites en sorte que la table réagisse aux interactions de l'utilisateur comme montré sur la vidéo ci-dessous (mise en évidence de la ligne sous le curseur de la souris, ajout d'une barre de défilement (scrolling) horizontale lorsque la fenêtre est trop étroite pour afficher toute la table).


Correction : La aussi l'effet est très facilement obtenu en rajoutant les classes table-responsive et table-hover à l'élément table.

...
<table class="table table-responsive table-hover>
    ...
</table>