Différences entre les versions de « Using grids »

De Test Entre Amis
Aller à : navigation, rechercher
 
(6 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
−
<div class="container-fluid md-4">
+
<div class="container-fluid mb-4">
−
    <div class="row">
+
<div class="row">
−
        <div class="col-12 col-lg-6 col-xl-4 md-2 md-lg-4 md-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>
−
                    [[File:Screenshot tweeki.png|class=img-fluid| link=]]
+
[[File:Screenshot tweeki.png|class=img-fluid| link=]]
−
                </div>
+
</div>
−
                <div class="card-footer">Footer text 1</div>
+
<div class="card-footer">Footer text 1</div>
−
            </div>
+
</div><!-- End of card -->
−
            <!-- End of card -->
+
</div><!-- end of col 1-->
−
        </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="col-12 col-lg-6 col-xl-4 md-2 md-lg-4 md-xl-0">
+
<div class="card">
−
            <div class="card">
+
<div class="card-body">
−
                <div class="card-body">
+
<h5 class="card-title">Title 2</h5>
−
                    <h5 class="card-title">Title 2</h5>
+
[[File:Screenshot tweeki.png|class=img-fluid| link=]]
−
                    [[File:Screenshot tweeki.png|class=img-fluid| link=]]
+
</div>
−
                </div>
+
<div class="card-footer">Footer text 2</div>
−
                <div class="card-footer">Footer text 2</div>
+
</div><!-- End of card -->
−
            </div>
+
</div><!-- End of col 2-->
−
            <!-- End of card -->
+
 
−
        </div>
+
<div class="col-12 col-lg-6 col-xl-4">
−
        <!-- End of col 2-->
+
<div class="card">
−
        <div class="col-12 col-lg-6 col-xl-4">
+
<div class="card-body">
−
            <div class="card">
+
<h5 class="card-title">Title 3</h5>
−
                <div class="card-body">
+
[[File:Screenshot tweeki.png|class=img-fluid| link=]]  
−
                    <h5 class="card-title">Title 3</h5>
+
</div>
−
                    [[File:Screenshot tweeki.png|class=img-fluid| link=]]
+
<div class="card-footer">Footer text 3</div>
−
                </div>
+
</div><!-- End of card -->
−
                <div class="card-footer">Footer text 3</div>
+
</div><!-- End of col 3-->
−
            </div>
+
 
−
            <!-- End of card -->
+
</div><!-- End of row 1-->
−
        </div>
+
</div>
−
        <!-- End of col 3-->
+
 
−
    </div>
+
----
−
    <!-- End of row 1-->
+
 
 +
<div class="panel-group" id="accordion">
 +
<accordion parent="accordion" heading="SECTION1" class="show">
 +
  Lorem ipsum...
 +
</accordion>
 +
<accordion parent="accordion" heading="SECTION2">
 +
  Lorem ipsum...
 +
</accordion>
 
</div>
 
</div>

Version actuelle datée du 1 février 2023 à 18:35

Title 1

Screenshot tweeki.png

Title 2

Screenshot tweeki.png

Title 3

Screenshot tweeki.png


  Lorem ipsum...

  Lorem ipsum...