Différences entre les versions de « Using grids »

De Test Entre Amis
Aller à : navigation, rechercher
Ligne 1 : Ligne 1 :
 
<div class="container-fluid mb-4">
 
<div class="container-fluid mb-4">
    <div class="row">
+
<div class="row">
        <div class="col-12 col-lg-6 col-xl-4 mb-2 mb-lg-4 mb-xl-0">
+
<div class="col-12 col-lg-6 col-xl-4 mb-2 mb-lg-4 mb-xl-0">
            <div class="card">
+
<div class="card">
                <div class="card-body">
+
<div class="card-body">
                    <h5 class="card-title">Title 1</h5>
+
<h5 class="card-title">Title 1</h5>
                    <img src="https://tweeki.kollabor.at/w/images/3/35/Screenshot_tweeki.png" class="img-fluid" alt="Un essai">
+
[[File:Screenshot tweeki.png|class=img-fluid| link=]]
                </div>
 
                <div class="card-footer">Footer text 1</div>
 
            </div>
 
            <!-- End of card -->
 
        </div>
 
        <!-- end of col 1-->
 
        <div class="col-12 col-lg-6 col-xl-4 mb-2 mb-lg-4 mb-xl-0">
 
            <div class="card">
 
                <div class="card-body">
 
                    <h5 class="card-title">Title 2</h5>
 
                    <img src="https://tweeki.kollabor.at/w/images/3/35/Screenshot_tweeki.png" class="img-fluid" alt="Un essai">
 
                </div>
 
                <div class="card-footer">Footer text 2</div>
 
            </div>
 
            <!-- End of card -->
 
        </div>
 
        <!-- End of col 2-->
 
        <div class="col-12 col-lg-6 col-xl-4">
 
            <div class="card">
 
                <div class="card-body">
 
                    <h5 class="card-title">Title 3</h5>
 
                    <img src="https://tweeki.kollabor.at/w/images/3/35/Screenshot_tweeki.png" class="img-fluid" alt="Un essai">
 
                </div>
 
                <div class="card-footer">Footer text 3</div>
 
            </div>
 
            <!-- End of card -->
 
        </div>
 
        <!-- End of col 3-->
 
    </div>
 
    <!-- End of row 1-->
 
 
</div>
 
</div>
 +
<div class="card-footer">Footer text 1</div>
 +
</div><!-- End of card -->
 +
</div><!-- end of col 1-->
  
<img src="https://tweeki.kollabor.at/w/images/3/35/Screenshot_tweeki.png" class="img-fluid" alt="Un essai">
+
<div class="col-12 col-lg-6 col-xl-4 mb-2 mb-lg-4 mb-xl-0">
 +
<div class="card">
 +
<div class="card-body">
 +
<h5 class="card-title">Title 2</h5>
 +
[[File:Screenshot tweeki.png|class=img-fluid| link=]] 
 +
</div>
 +
<div class="card-footer">Footer text 2</div>
 +
</div><!-- End of card -->
 +
</div><!-- End of col 2-->
 +
 
 +
<div class="col-12 col-lg-6 col-xl-4">
 +
<div class="card">
 +
<div class="card-body">
 +
<h5 class="card-title">Title 3</h5>
 +
[[File:Screenshot tweeki.png|class=img-fluid| link=]]
 +
</div>
 +
<div class="card-footer">Footer text 3</div>
 +
</div><!-- End of card -->
 +
</div><!-- End of col 3-->
 +
 
 +
</div><!-- End of row 1-->
 +
</div>

Version du 1 février 2023 à 16:50

Title 1

Screenshot tweeki.png

Title 2

Screenshot tweeki.png

Title 3

Screenshot tweeki.png