R E

IE
N N
B A
Code associe à <section class="banner d-flex justify-content-center
align-items-center pt-5" >
<div class="container my-5 py-5">
la partie de <div class="row">
<div class="col-md-6"></div>

banniere : <div class="col-md-6">

<h1 class="text-capitalize py-3 redressed
banner-desc text-white ">Lorem, ipsum dolor<br> sit amet
consectetur.</h1>
<p>
<button class="btn btn-order btn-lg me-5
rounded-0 merriweather">Commander maintenant</button>
<button class="btn btn-outline-info btn-
lg rounded-0 merriweather">Reserver</button>
</p>
</div>
</div>
</div>
</section>
<section class="banner d-flex justify-content-center align-items-center pt-5" >

justify- align-items-
d-flex : content-center: center pt-5:
pour que notre aligner aligner
element avoir un notre elements Notre
display flex horizontalement elements
en centre verticalement
en centre
Row and col:
Dans une disposition en grille, le
contenu doit être placé dans des
colonnes et seules les colonnes
peuvent être des enfants
immédiats de lignes.
text-capitalize:
pour rendre le texte
capitalize
<div class="container my-5 py-5">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6">
<h1 class="text-capitalize py-3 redressed
banner-desc text-white ">Lorem, ipsum dolor<br> sit amet
consectetur. </h1>
<p>
<button class="btn btn-order btn-lg me-5
rounded-0 merriweather">Commander maintenant
</button>
<button class="btn btn-outline-info btn-lg
rounded-0 merriweather">Reserver</button>
</p>
</div>
</div>
</div>
 N U
M E
N E N
D 'U IO :
N AT R E
T I O I G A I
A NA EN V T
E
C R D E EM
P L
U P
S
 Block de code
<div class="row"> explique la création de
<h3 class="text-center text-light merriweather">Nos
variees</h3> menu précèdente
<div class="card text-center bg-transparent mb-4">
<div class="card-header redressed fs-4">
<ul class="nav nav-tabs justify-content-center card-
header-tabs">
<li class="nav-item">
<a class="nav-link active"aria-current="true"
href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link text-light" aria-
disabled="true">Disabled</a>
</li>
</ul>
</div>
<div class="card-body text-light">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a
natural lead-in to additional content.</p>
</div>
</div>
</div>
 code
<div class="col"> associer
<div class="card"> les cards
<img src="img/banniere6.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card
title</h5>
<p class="card-text">This is
a longer card with supporting text below as a
natural lead-in to additional content. This
content is a little bit longer.</p> Mème code
</div> pour cette
</div> carte
</div>
 A IE
U L
R M
F O
 <div class="input-group mb-3">
<label class="input-
<div class="input-group mb-3">
group-text" for="inputGroupSelect01"><i
<span class="input-
class="fas
group-text" id="basic-addon1"><i
fa-sort-numeric-up-alt"></i></label>
class="fas fa-user"></i></span>
<select class="form-
<input type="text"
select" id="inputGroupSelect01">
class="form-control" placeholder="Votre
<option
nom" />
selected>Nomber de personnes</option>
</div>
<option
value="1">One</option>
<option
value="2">Two</option>
<option
value="3">Three</option>
</select>
</div>
<div class="input-group mb-3">
<span class="input-
group-text" id="basic-addon1"><i
class="fas fa-phone"></i></span>
<input type="number"
class="form-control"
placeholder="Numero de telephone" />
</div>
<div class="input-group mb-3">
<span class="input-group-text"><i
class="fas fa-user"></i></span>
<input type="text" class="form-
control" placeholder="Votre nom
complet" />
</div>
 <div class="input-group mb-3">
<label
class="input-group-text"
for="inputGroupSelect01"><i class="fas fa-
<div class="input-group mb-3">
utensils"></i></label>
<input
<select
type="text" class="form-control"
class="form-select"
placeholder="Adresse zone Ex:. Ekounou,
id="inputGroupSelect01">
Avenu 52" />
<span
<option class="text-muted">Choisir un
class="input-group-text"><i class="fas
menu</option>
fa-home"></i></span>
</div>
<option value="1">Choix 1</option>

<option value="2">Choix 2</option>

<option value="3">Choix 3</option>

</select>
</div>