Créer un template avec Bootstrap 4

Créer un template avec Bootstrap 4

Concevoir et réaliser un template HTML n'est pas forcément à la portée de tout le monde. Cela demande des connaissances qu'il faut acquérir et maîtriser. Heureusement, il existe des ressources qui permettent d'aller plus vite, comme ce tutoriel :)

Réaliser son propre site web peut être un objectif séduisant pour qui souhaite mettre à profit une période d'auto-formation, de vacances ou... de confinement. Au delà de la satisfaction personnelle, cela peut aussi être un bon moyen de détecter une vocation jusque là ignorée.
Qui sait, vous aimez peut être le code sans le savoir !

Pour le découvrir, il faut essayer et se lancer. Aujourd'hui, le web regorge de ressources permettant d'apprendre et de se former : les moocs, Youtube, les forums, les réseaux sociaux et bien sur, les tutoriels. Et comme une bonne nouvelle n'arrive jamais seule, la plupart de ces ressources sont en accès libre.

L'objectif de ce guide est de vous permettre de réaliser un template HTML à partir d'un exemple que j'ai essayé de rendre le plus ludique possible. Comme vous n'êtes pas encore certain.e que ce tutoriel va vous convenir et que vous irez jusqu'au bout, nous allons veiller à n'utiliser que des ressources gratuites (éditeur de texte, framework, etc.) pour ne pas à avoir à investir. Ainsi, vous pouvez vous lancer sans craintes. Mais l'objectif est quand même d'aller jusqu'au bout, n'est-ce pas :)

Le template

Histoire de vous mettre l'eau à la bouche, voici le template que vous pouvez réaliser grâce à ce tutoriel :

Visualisation template

Je ne sais pas pour vous mais moi, je suis très fan du Material Design

Les outils nécessaires

Pour suivre ce tutoriel et réaliser ce template, vous aurez besoin des ressources suivantes (elles sont toutes gratuites !):

Material Design Bootstrap

C'est le moteur de notre futur template. Tout est inclus dedans, il suffit de télécharger ce pack.

Accéder au site

Notepad++

Sans doute l'un des meilleurs éditeurs de texte qui soit: parfait pour écrire du code comme un.e pro !

Accéder au site

Pixabay

Vous aurez peut-être besoin d'images ou d'illustrations gratuites et libre de droits ? C'est par ici.

Accéder au site

Le framework Bootstrap

Bon, on commence par le gros morceau : Bootstrap
C'est un framework CSS qui a été créé par Twitter. C'est aujourd'hui le plus utilisé au monde. Un framework CSS est une suite de règles CSS qui détermine la position des éléments sur la page, leur mise en forme et qui gère également toute la partie responsive design afin que le site s'affiche aussi bien sur un ordinateur, une tablette ou un téléphone portable.

Bref comme vous le voyez, c'est plutôt complet et c'est surtout prêt à l'emploi puisque toutes les règles CSS ont déjà été écrites. Naturellement et si vous le souhaitez, vous pourrez rajouter les vôtres.

Cependant, pour celles et ceux qui souhaiteraient se former et découvrir ce framework avant d'aller plus loin, je leur propose d'ajouter la documentation officielle de Bootstrap à leurs favoris :

et de consacrer 20 minutes à visionner cette vidéo de présentation :

Résumons. Alors, qu'est-ce que Bootstrap exactement ?

  • Il s'agit d'un framework CSS gratuit qui permet un développement Web plus rapide et plus facile.
  • Il combine des modèles de conception HTML, CSS et JS pour la typographie, les formulaires, les boutons, les tableaux, la navigation, les modaux, les carrousels d'images et de nombreux autres composants, ainsi que les plugins JavaScript.
  • Il offre également une approche pratique pour créer des sites web responsive design.

Pourquoi utiliser Bootstrap ?

  • Ce framework est particulièrement adapté aux novices, vous n'avez donc pas besoin de maîtriser HTML ou CSS avant de vous y plonger.
  • Son CSS fonctionne parfaitement sur les téléphones, tablettes ou ordinateurs de bureau.
  • Ses principaux styles de framework sont prédéfinis pour une approche mobile-first.
  • Tous les navigateurs modernes sont entièrement compatibles avec Bootstrap (Chrome, Firefox, Internet Explorer, Microsoft Edge, Safari et Opera).

Laptop Bootstrap

Ce tutoriel que je vous ai préparé vous guidera progressivement à travers les différents éléments de Bootstrap, étape par étape.

Chaque leçon est fournie avec une série d'exemples pratiques, et chacun de ces exemples vous apportera des connaissances supplémentaires en matière de conception Web.

Dans ce didacticiel, vous utiliserez Material Design Bootstrap, qui offre en plus, une superbe apparence conforme aux normes de Material Design édictées par Google.

Notepad++

Notepad++ est un éditeur de texte qui permet de lire et écrire de nombreux langages comme le C++, le PhP, le CSS ou encore le HTML.
Mais rassurez-vous, pour ce tutoriel, nous n'utiliserons que le HTML et le CSS et encore, de manière très succincte.

Si vous avez déjà téléchargé Notepad++, lancez l'installation en double cliquant sur l'icône et suivez les différentes étapes jusqu'au bout du processus.

Si comme moi vous préférez les thèmes sombres, je vous invite à paramétrer Notepad++ comme suit :

  • Cliquez sur le menu "Préférences" puis ouvrez le sous-menu "Configurateur de coloration syntaxique"
  • Dans l'option "Thème", sélectionnez "Bespin" puis cliquez sur "Enregistrez & Fermer"

Croyez-moi quand on passe des heures à travailler sur ce type d'outil, un thème sombre est un vrai confort pour les yeux.

Changement de thème Notepad++

Si vous avez déjà téléchargé Material Design Bootstrap et installé Notepad++ comme indiqué, vous pouvez commencez !

Etape 1

Dézippez l'archive téléchargée puis ouvrez le fichier index.html avec Notepad++.

Dezip de l'archive MDBootstrap

Vous devriez obtenir ceci :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Material Design for Bootstrap</title>
  <!-- MDB icon -->
  <link rel="icon" href="img/mdb-favicon.ico" type="image/x-icon">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
  <!-- Google Fonts Roboto -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <!-- Bootstrap core CSS -->
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <!-- Material Design Bootstrap -->
  <link rel="stylesheet" href="css/mdb.min.css">
  <!-- Your custom styles (optional) -->
  <link rel="stylesheet" href="css/style.min.css">
</head>
<body>

  <!-- Start your project here-->  
  <div style="height: 100vh">
    <div class="flex-center flex-column">
      <h1 class="text-hide animated fadeIn mb-4" style="background-image: url('https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'); width: 250px; height: 90px;">MDBootstrap</h1>
      <h5 class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>
      <p class="animated fadeIn text-muted">MDB Team</p>
    </div>
  </div>
  <!-- End your project here-->

  <!-- jQuery -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <!-- Bootstrap tooltips -->
  <script type="text/javascript" src="js/popper.min.js"></script>
  <!-- Bootstrap core JavaScript -->
  <script type="text/javascript" src="js/bootstrap.min.js"></script>
  <!-- MDB core JavaScript -->
  <script type="text/javascript" src="js/mdb.min.js"></script>
  <!-- Your custom scripts (optional) -->
  <script type="text/javascript"></script>

</body>
	</html>

Tous les fichiers nécessaires au fonctionnement du template sont déjà indiqués, donc tout est prêt à démarrer.
Si vous lisez attentivement les <!-- commentaires -->, vous comprendrez assez facilement quel est le rôle de tous les fichiers importés.

Attention : vous pouvez ajouter d'autres liens mais tous les fichiers indiqués ci-dessus doivent être listés dans cet ordre.

Par exemple: css/mdb.min.css doit toujours être listé après css/bootstrap.min.css et js/jquery-3.3.1.min.js doit toujours être listé avant js/bootstrap.min.js.

Etape 2

Avant d'ajouter quoi que ce soit, nous allons d'abord faire de la place. Dans le fichier index.html, supprimez tout le code qui suit :

<div style="height: 100vh">
    <div class="flex-center flex-column">
      <h1 class="text-hide animated fadeIn mb-4" style="background-image: url('https://mdbootstrap.com/img/logo/mdb-transparent-250px.png'); width: 250px; height: 90px;">MDBootstrap</h1>
      <h5 class="animated fadeIn mb-3">Thank you for using our product. We're glad you're with us.</h5>
      <p class="animated fadeIn text-muted">MDB Team</p>
    </div>
  </div>

Nous allons également ajouter les styles CSS qui permettent d'obtenir le même rendu que l'exemple.

Pour cela, veuillez ajouter ce code dans le fichier style.min.css qui est dans le dossier CSS.

.view,
body,
html {
    height: 100%
}

@media (max-width:740px) {
    .full-page-intro {
        height: 1000px
    }
}

.navbar {
    z-index: 50;
    background-color: rgba(0, 0, 0, .3)
}

.page-footer,
.top-nav-collapse {
    color;
    #1C2331
}

@media only screen and (max-width:768px) {
    .navbar {
        background-color: #1C2331
    }
}

.view {
    position: relative;
    overflow: hidden;
    cursor: default;
}

.index-page .page-header {
    height: 50vh;
    overflow: hidden;
}

.main-raised {
    z-index: 999;
    margin: -70px 30px 0px;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.clear-filter::before {
    background: none;
}

.header-filter {
    position: relative;
}

.header-filter:before,
.header-filter:after {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "
    "
    ;
}

.page-header {
    z-index: -1;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    align-items: center;
}

.brand {
    position: absolute;
    z-index: 9;
}

.purple-filter:after {
    z-index: -1;
    background: rgba(101, 47, 142, 0.64);
    background: linear-gradient(45deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
    background: -moz-linear-gradient(135deg, rgba(101, 47, 142, 0.88) 0%, rgba(125, 46, 185, 0.45) 100%);
}

.main {
    background: #FFFFFF;
    position: relative;
    z-index: 30;
}

.z-depth-1-half {
    -webkit-box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15) !important;
}

.card .card-circle {
    width: 7.5rem;
    height: 7.5rem;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
}

.card .card-circle .fas,
.card .card-circle .fab,
.card .card-circle .far {
    font-size: 4rem;
}

.footer.page-footer {
    bottom: 0;
    color: #1c2331;
}

.page-footer a {
    bottom: 0;
    color: #1c2331;
}

.map-container {
    height: 230px;
    position: relative;
}

.map-container iframe {
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    position: absolute;
}

.footer-copyright {
    color: #eee;
}

.footer-copyright a {
    color: #eee;
}

Enregistrez votre saisie (Fichier - Enregistrer).

Etape 3

Maintenant, nous allons définir la structure de notre projet. Pour cela, nous allons diviser la page en 3 sections distinctes :

<header> - l'en-tête pour le menu,

<main> - la partie centrale pour le contenu du site

<footer> - le pied de page pour les informations complémentaires et les liens

Copiez le code qui suit et collez-le à la place de celui que vous avez supprimé à l'étape précédente :

<!--Main Navigation-->
<header>

</header>
<!--Main Navigation-->

<!--Main layout-->
<main>

</main>
<!--Main layout-->

<!--Footer-->
<footer>

</footer>
<!--Footer-->

Voilà, maintenant que la structure du site est en place, il faut.... la remplir !

Etape 4

Vous allez maintenant ajouter le premier élément à votre template : le menu.

Le code du menu que j'ai choisi est relativement simple et il est basé sur la class navbar de Bootstrap (pourquoi faire compliqué quand on peut faire simple ?). J'ai ajouté une classe fixed-top pour que le menu reste visible en permanence lors du scroll.

Si vous avez compris le principe, ce code est à ajouter entre les balises.....<header> et </header> du fichier index.html :

<!--Navbar-->
			<nav class="navbar navbar-expand-lg fixed-top navbar-dark secondary-color-dark">
			
			<!-- Additional container -->
			<div class="container">
			
			<!-- Navbar brand -->
			<a class="navbar-brand" href="#"><img src="img/kit/logo.png" alt="" /></a>
			
			<!-- Collapse button -->
			<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"
			aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
			</button>
			
			<!-- Collapsible content -->
			<div class="collapse navbar-collapse" id="basicExampleNav">
			
			<!-- Links -->
			<ul class="navbar-nav mx-auto mr-auto">
			<li class="nav-item active mx-2">
			<a class="nav-link " href="#features">Features</a>
			<span class="sr-only">(current)</span>
			</li>
			<!-- Dropdown example 
			<li class="nav-item dropdown mx-2">
			<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
			aria-expanded="false" >Example Dropdown</a>
			<div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">
			<a class="dropdown-item" href="#">An sub-menu</a>
			<a class="dropdown-item" href="#">Another one</a>
			<a class="dropdown-item" href="#">Something else</a>
			</div>
			</li>-->
			<li class="nav-item mx-2">
			<a class="nav-link" href="#projects">Projects</a>
			</li>
			<li class="nav-item mx-2">
			<a class="nav-link" href="#pricing">Pricing</a>
			</li>
			<li class="nav-item mx-2">
			<a class="nav-link" href="#team">Team</a>
			</li>
			<li class="nav-item mx-2">
			<a class="nav-link" href="#articles">Articles</a>
			</li>						
			<li class="nav-item mx-2">
			<a class="nav-link" href="#contact">Contact</a>
			</li>								
			</ul>
			<!-- Links -->
			
			<form class="form-inline text-white">
			<div class="md-form my-0">
			<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
			<i class="fa fa-search pr-3"></i>
			</div>
			</form>
			</div>
			<!-- Collapsible content -->
			
			</div>
			<!-- Additional container -->
			
			</nav>
		<!-- Navbar-->

Maintenant, copiez/collez le code du menu dans votre fichier index.html.

Comme vous pouvez le voir, j'ai commenté la partie Dropdown example afin de masquer un éventuel sous-menu. Naturellement, vous pouvez décider de l'afficher en supprimant simplement <!-- Dropdown example et -->.

Si vous le souhaitez, vous pouvez vous amuser un peu avec votre nouvelle barre de navigation. Essayez de modifier le nom de certains liens et d'ajouter des liens vers certains sites Web déjà existants.

Enregistrez votre saisie (Fichier - Enregistrer) puis ouvrez votre fichier index.html avec votre navigateur.

Maintenant que vous avez compris le principe, vous allez pouvoir ajouter d'autres rubriques à votre site Web.

Etape 5

Avant d'ajouter du contenu, nous allons structurer notre projet. Et pour cela, nous allons nous servir de la grille Bootstrap.

Tous les éléments dont vous avez besoin font partie du système de grille Bootstrap, système qui permet de créer des sites Web qui s'afficheront aussi bien sur les écrans mobiles, tablettes et ordinateurs de bureau. En l'utilisant, vous pourrez créer une mise en page réactive pour votre site Web, qui s'affichera parfaitement sur tous les types d'appareils!

Mais quels sont ces éléments et comment cela fonctionne-t-il ?

Container (le conteneur)

Bootstrap nécessite l'utilisation d'un élément conteneur pour envelopper le contenu du site et héberger notre système de grille. Vous pouvez choisir l'un des deux conteneurs :

  • <div class="container"> - affichera votre contenu sur la largeur totale disponible,
  • <div class="container"> - centrera votre contenu et lui appliquera des marges appropriées de chaque côté. Dans le cas présent, c'est ce que vous utiliserez.

Row (la ligne)

Row crée colonnes horizontales. Donc, si vous souhaitez partager votre contenu horizontalement, vous devez utilisez <div class="row">.

Columns (les colonnes)

Le système de grille de Bootstrap vous permet d'utiliser jusqu'à 12 colonnes sur la largeur de votre page. Pour créer une colonne, vous devez utiliser une classe <div class="col-md-*">, ou "*" est le nombre de colonnes qu'occupera votre contenu compris entre 1 et 12.

Important : n'oubliez pas que les colonnes de la grille peuvent contenir jusqu'à douze colonnes sur une seule ligne.

Important 2 : si vous souhaitez utiliser le système de grille de Bootstrap, vous devez toujours utiliser cette construction de base avec le conteneur (ou le conteneur-fluide) et les lignes. Sinon, votre colonne ne fonctionnera pas correctement.

Etape 6

Vous allez maintenant ajouter l'en-tête de votre site Web... mais il y a une légère subtilité ici.

En effet, l'en-tête ne se place pas dans le <header> mais entre celui-ci et la partie centrale. Concrètement, c'est à cet endroit là :

       </header>
			<!--Main Navigation-->
			
			J'ajoute l'en-tête ici
			
			<!--Main layout-->
		<main>

Et maintenant, voici le code qui est à ajouter dans votre fichier index.html :

<div class="page-header header-filter clear-filter purple-filter" data-parallax="true" style="background-image: url('img/kit/bg2.jpg'); background-size: cover;">
			
			<div class="container">
				
				<div class="row">
					
					<div class="col-md-8  pb-5 mb-5 ml-auto mr-auto">
						
						<div class="brand text-center text-white">
							<h1 class="display-2">Material Destiny</h1>
							
							<hr class="mb-4 white" style="width:80%" />
							
							<h3 class="pb-2">A Kickass Bootstrap 4 Template based on Material Design.</h3>
							
							<a class="btn btn-outline-white" href="" target="_blank" role="button">Download Me Now
								<i class="fas fa-download ml-2"></i>
							</a>
							
						</div>
						
					</div>
					
				</div>
				
			</div>
			
		</div>

Naturellement, vous adapterez les textes ainsi que l'image selon vos besoins.

Enregistrez votre saisie (Fichier - Enregistrer).

Etape 7

On aborde maintenant les choses sérieuses avec le contenu du site à proprement parler.

Si vous avez bien suivi l'étape 5, vous remarquerez tout de suite que la partie Features du template est composée d'une première ligne puis d'une seconde ligne contenant 3 colonnes (Avouez que ça saute aux yeux, non ?).

Détail de la partie features

On est d'accord pour dire que c'est tout de suite plus visible comme ça ;)

Avant de voir le code à ajouter, il faut d'abord apporter une petite modification à notre conteneur principal comme suit :

		<!--Main layout-->
				<main class="pt-5" id="features">
				
					<!--Main container-->
					<div class="container">
				
					-----
				
					</div>
					<!--Main container-->
				
				</main>
			<!--Main layout-->

Ainsi, toute la partie centrale du site sera contenue dans un... conteneur !
J'ai également ajouté un padding supérieur avec la classe pt-5 (pour padding-top) ainsi qu'un ID qui sert à relier cette partie du site au lien de menu principal.

Passons maintenant au code à insérer.

				<!--Section Features-->
				<section class="text-center py-5">
					
					<!-- Heading -->
					<h2 class="mb-4 indigo-text font-weight-bold">Our Best Features</h2>
					
					<!--Grid row-->
					<div class="row d-flex justify-content-center mb-4">
						
						<!--Grid column-->
						<div class="col-md-8">
							
							<!-- Description -->
							<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi voluptate
								hic
								provident nulla repellat
								facere esse molestiae ipsa labore porro minima quam quaerat rem, natus repudiandae debitis
								est
							sit pariatur.</p>
							
						</div>
						<!--Grid column-->
						
					</div>
					<!--Grid row-->
					
					<!--Grid row-->
					<div class="row">
						
						<!--Grid column-->
						<div class="col-md-4 mb-5">
							<i class="fa fa-camera-retro fa-4x text-secondary"></i>
							<h4 class="my-4 font-weight-bold indigo-text">Experience</h4>
							<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
								maiores nam,
								aperiam minima
							assumenda deleniti hic.</p>
						</div>
						<!--Grid column-->
						
						<!--Grid column-->
						<div class="col-md-4 mb-1">
							<i class="fa fa-heart fa-4x purple-text"></i>
							<h4 class="my-4 font-weight-bold indigo-text">Happiness</h4>
							<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
								maiores nam,
								aperiam minima
							assumenda deleniti hic.</p>
						</div>
						<!--Grid column-->
						
						<!--Grid column-->
						<div class="col-md-4 mb-1">
							<i class="fa fa-bicycle fa-4x deep-purple-text"></i>
							<h4 class="my-4 font-weight-bold indigo-text">Adventure</h4>
							<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit
								maiores nam,
								aperiam minima
							assumenda deleniti hic.</p>
						</div>
						<!--Grid column-->
						
					</div>
					<!--Grid row-->
					
				</section>
			<!--Section Features-->

La première ligne est composée d'une colonne de 8 qui est centrée automatiquement grâce aux classes d-flex justify-content-center.

La seconde ligne est composée de nos trois colonnes que l'on repère tout de suite grâce à la classe col-md-4. Je vous rappelle que la grille Bootstrap fonctionne sur une base de 12 colonnes.

Vous noterez l'utilisation des Font Awesome grâce à la syntaxe <i class="fa fa-bicycle fa-4x deep-purple-text"></i>

Enregistrez votre saisie (Fichier - Enregistrer).

Etape 8

On termine la partie des features avec cette fois-ci, le diaporama, le titre et le texte associé puis en dessous, les différentes caractéristiques.

Diaporama de la partie features

					<section class="py-5">
					<!--Grid row-->
					<div class="row pb-5">
						
						<!--Grid column-->
						<div class="col-md-6 my-4">
							
							<!--Carousel Wrapper-->
							<div id="carousel-example-1z" class="carousel slide carousel-fade carousel-fade" data-ride="carousel">
								<!--Indicators-->
								<ol class="carousel-indicators">
									<li data-target="#carousel-example-1z" data-slide-to="0" class="active"></li>
									<li data-target="#carousel-example-1z" data-slide-to="1"></li>
									<li data-target="#carousel-example-1z" data-slide-to="2"></li>
								</ol>
								<!--/.Indicators-->
								<!--Slides-->
								<div class="carousel-inner z-depth-1-half" role="listbox">
									<!--First slide-->
									<div class="carousel-item active">
										<img class="d-block w-100" src="img/slideshow/slide-2.jpg" alt="First slide">
									</div>
									<!--/First slide-->
									<!--Second slide-->
									<div class="carousel-item">
										<img class="d-block w-100" src="img/slideshow/slide-1.jpg" alt="Second slide">
									</div>
									<!--/Second slide-->
									<!--Third slide-->
									<div class="carousel-item">
										<img class="d-block w-100" src="img/slideshow/slide-3.jpg" alt="Third slide">
									</div>
									<!--/Third slide-->
								</div>
								<!--/.Slides-->
								<!--Controls-->
								<a class="carousel-control-prev" href="#carousel-example-1z" role="button" data-slide="prev">
									<span class="carousel-control-prev-icon" aria-hidden="true"></span>
									<span class="sr-only">Previous</span>
								</a>
								<a class="carousel-control-next" href="#carousel-example-1z" role="button" data-slide="next">
									<span class="carousel-control-next-icon" aria-hidden="true"></span>
									<span class="sr-only">Next</span>
								</a>
								<!--/.Controls-->
							</div>
							<!--/.Carousel Wrapper-->							
						</div>
						<!--Grid column-->
						
						<!--Grid column-->
						<div class="col-md-6 my-4">
							
							<h2 class="display-4">A Great Heading</h2>
							<hr>
							<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis pariatur quod ipsum atque quam dolorem voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione sint mollitia, perferendis natus quaerat!.</p>
							<p>Datque quam dolorem voluptate officia sunt placeat consectetur alias fugit cum praesentium ratione.</p>
							<a class="btn btn-outline-purple" href="#" target="_blank" role="button">More info</a>
						</div>
						<!--Grid column-->
						
					</div>
					<!--Grid row-->
					
					<!--Row features-->
					<div class="row features-small mt-5 wow fadeIn">
						
						<!--First column-->
						<div class="col-md-4">
							<!--First row-->
							<div class="row">
								<div class="col-2">
									<i class="fas fa-check-circle fa-2x indigo-text"></i>
								</div>
								<div class="col-10">
									<h6 class="feature-title">Free for personal and commercial use</h6>
									<p class="grey-text">Our license is user-friendly. Feel free to use MDB for both private as well as commercial projects.
									</p>
									<div style="height:15px"></div>
								</div>
							</div>
							<!--/First row-->
							
							<!--Second row-->
							<div class="row">
								<div class="col-2">
									<i class="fas fa-check-circle fa-2x indigo-text"></i>
								</div>
								<div class="col-10">
									<h6 class="feature-title">400+ UI elements</h6>
									<p class="grey-text">An impressive collection of flexible components allows you to develop any project.
									</p>
									<div style="height:15px"></div>
								</div>
							</div>
							<!--/Second row-->
							
							<!--Third row-->
							<div class="row">
								<div class="col-2">
									<i class="fas fa-check-circle fa-2x indigo-text"></i>
								</div>
								<div class="col-10">
									<h6 class="feature-title">600+ icons</h6>
									<p class="grey-text">Hundreds of useful, scalable, vector icons at your disposal.</p>
									<div style="height:15px"></div>
								</div>
							</div>
							<!--/Third row-->
							
							<!--Fourth row-->
							<div class="row">
								<div class="col-2">
									<i class="fas fa-check-circle fa-2x indigo-text"></i>
								</div>
								<div class="col-10">
									<h6 class="feature-title">Fully responsive</h6>
									<p class="grey-text">It doesn't matter whether your project will be displayed on desktop, laptop, tablet or mobile phone. MDB
									looks great on each screen.</p>
									<div style="height:15px"></div>
								</div>
							</div>
							<!--/Fourth row-->
						</div>
						<!--/First column-->
						
						<!--Second column-->
						<div class="col-md-4 flex-center">
							<img src="img/kit/screen.png" alt="Material Destiny Template displayed on iPhone" class="z-depth-0 img-fluid">
						</div>
						<!--/Second column-->
						
						<!--Third column-->
						<div class="col-md-4 mt-2">
							<!--First row-->
							<div class="row">
								<div class="col-2">
									<i class="fas fa-check-circle fa-2x indigo-text"></i>
								</div>
								<div class="col-10">
									<h6 class="feature-title">70+ CSS animations</h6>
									<p class="grey-text">Neat and easy to use animations, which will increase the interactivity of your project and delight your visitors.
									</p>
									<div style="height:15px"></div>
								</div>
							</div>
							<!--/First row-->
							
							<!--Second row-->
							<div class="row">
								<div class="col-2">
									<i class="fas fa-check-circle fa-2x indigo-text"></i>
								</div>
								<div class="col-10">
									<h6 class="feature-title">Plenty of useful templates</h6>
									<p class="grey-text">Need inspiration? Use one of our predefined templates for free.</p>
									<div style="height:15px"></div>
								</div>
							</div>
							<!--/Second row-->
							
							<!--Third row-->
							<div class="row">
								<div class="col-2">
									<i class="fas fa-check-circle fa-2x indigo-text"></i>
								</div>
								<div class="col-10">
									<h6 class="feature-title">Easy installation</h6>
									<p class="grey-text">5 minutes, a few clicks and... done. You will be surprised at how easy it is.
									</p>
									<div style="height:15px"></div>
								</div>
							</div>
							<!--/Third row-->
							
							<!--Fourth row-->
							<div class="row">
								<div class="col-2">
									<i class="fas fa-check-circle fa-2x indigo-text"></i>
								</div>
								<div class="col-10">
									<h6 class="feature-title">Easy to use and customize</h6>
									<p class="grey-text">Using MDB is straightforward and pleasant. Components flexibility allows you deep customization. You will
									easily adjust each component to suit your needs.</p>
									<div style="height:15px"></div>
								</div>
							</div>
							<!--/Fourth row-->
						</div>
						<!--/Third column-->
						
					</div>
					<!--/Row features-->
					
					<!--Call to action-->
					<div class="text-center pt-4">
						<a class="btn btn-outline-purple" href="#" target="_blank" role="button">Download Me Now
							<i class="fas fa-download ml-2"></i>
						</a>
						<a class="btn btn-outline-secondary" href="#" target="_blank" role="button">Start Free Tutorial
							<i class="fas fa-graduation-cap ml-2"></i>
						</a>
					</div>
					<!--/.Call to action-->
					
			</section>

Même constat que précédemment sauf qu'ici, la première ligne est composée de deux colonnes grâce à la classe col-md-6.

La seconde ligne est constituée de 3 colonnes (ce que vous aviez déjà repéré, ça va de soi).

Pour terminer cette section, deux boutons Call To Action sont ajoutés.

Enregistrez votre saisie (Fichier - Enregistrer).

Etape 8

Maintenant que vous avez compris le principe, il ne vous reste plus qu'à compléter votre template en ajoutant les différentes rubriques dont vous avez besoin.

Si vous avez besoin d'inspiration et/ou si vous ne savez pas coder, rassurez-vous car il existe de nombreuses ressources disponibles sur Internet dédiées à Bootstrap qui vous permettront de trouver et ajouter ces rubriques.
Je vous en livre quelques unes que je vous conseille fortement d'ajouter à vos favoris :

Voici quelques exemples destinés à Bootstrap 4.1 que je trouve particulièrement réussis :

Snippet team page

Snippet pricing list

Snippet articles decalés

Snippet testimonials

Etape 9

Vous voici arrivé à l'avant dernière partie de ce tutoriel durant laquelle vous allez ajouter le footer (ou pied de page).

Dans cet exemple, j'ai volontairement opté pour un footer assez fin, car plus élégant. Il est composé de deux parties :

  • Les liens : avec un menu à gauche et les réseaux sociaux à droite,
  • Les Copyright : celui du créateur et celui du framework utilisé

Attention, veillez à ce que ce code remplace les balises <footer> que vous avez ajouté au début de ce tutoriel.

		<!-- Footer -->
			<footer class="page-footer font-small mt-5">			
			
			<!-- Footer links -->
			<div class="secondary-color">
				
				<div class="container">
					<!--Grid row-->
					<div class="row py-4 d-flex align-items-center">
						
						<!--Grid column-->
						<div class="col-md-6 col-lg-5 text-center text-md-left mb-4 mb-md-0">
							
							<a class="mr-4"  href="#">
								About Us
							</a>
							
							<a class="mr-4"  href="#">
								Blog
							</a>
							
							<a class="mr-4"  href="#">
								Terms
							</a>
							
							<a class=""  href="#">
								Privacy
							</a>							
							
						</div>
						<!--Grid column-->
						
						<!--Grid column-->
						<div class="col-md-6 col-lg-7 text-center text-md-right">
							<!--Facebook-->
							<a class="fb-ic ml-0">
								<i class="fab fa-facebook white-text mr-4"> </i>
							</a>
							<!--Twitter-->
							<a class="tw-ic">
								<i class="fab fa-twitter white-text mr-4"> </i>
							</a>
							<!--Google +-->
							<a class="vkon-ic">
								<i class="fab fa-vk white-text mr-4"> </i>
							</a>
							<!--Linkedin-->
							<a class="li-ic">
								<i class="fab fa-linkedin white-text mr-4"> </i>
							</a>
							<!--Instagram-->
							<a class="ins-ic">
								<i class="fab fa-instagram white-text mr-lg-4"> </i>
							</a>
						</div>
						<!--Grid column-->
						
					</div>
					<!--Grid row-->
				</div>
			</div>
			<!-- Footer links -->	
			
			<!-- Copyright -->
			<div class="footer-copyright secondary-color-dark text-center py-3">© 2020 Copyright <a href="https://www.web-eau.net" target="_blank" rel="noopener">web-eau.net</a> - 
				<a href="https://mdbootstrap.com/" target="_blank" rel="noopener"> MDBootstrap.com</a> - <a href="https://pixabay.com/" target="_blank" rel="noopener"> pixabay.com</a>
			</div>
			<!-- Copyright -->

			
		</footer>
		<!-- Footer -->	

Logiquement, vous devriez obtenir ceci :

Footer du template

Etape 10

Bravo, vous voilà arrivés presque au bout de ce didacticiel.

Cependant, tout n'est pas encore terminé pour autant. Il reste encore quelques détails à régler pour que l'on puisse considérer le travail comme achevé.

Pour que vos liens du menu renvoient au bon endroit de la page, il faut utiliser un système d'ancre et faire en sorte que cette ancre soit placée judicieusement dans le code. Pour cela, j'ai utilisé l'astuce suivante :

			</section>
				
				<hr class="my-5" id="projects">
				
			<section class="py-5">

Dans cet exemple, lorsqu'un internaute cliquera sur le menu "Projects", la page scrollera automatiquement à cet endroit pour afficher la section demandée.

Vous pouvez également ajouter dans la balise <head> les informations nécessaire pour l'Open Graph afin que le partage de votre site soit agréablement présenté sur les réseaux sociaux (Facebook, Twitter, etc.). Vous trouverez toutes les informations nécessaires pour cela dans cet article.

Présentation d'un partage sur Facebook

Pour celles et ceux qui ont eu le courage et la patience de suivre ce tutoriel jusqu'au bout, vous avez droit à une récompense :

Live Demo

Pour récupérer la totalité du code HTML de ce template, il vous suffit d'afficher le code source de la page en appuyant sur CTRL+U et faire un copier/coller.

Conclusion

J'espère que cet exercice vous plaira autant qu'il m'a donné du plaisir à vous le préparer. N'hésitez surtout pas à faire, à défaire et à refaire car c'est en essayant que l'on apprend. Vous ne vous tromperez pas, vous trouverez simplement un moyen différent de parvenir au résultat final escompté.

Vous pouvez utiliser ce template sans restriction en échange d'un MERCI et d'un partage de cette page auprès de vos réseaux. Les commentaires sont ouverts si vous avez des questions :)

Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.