Problem Solving sul layout a 5 colonne con Bootstrap

Bootstrap di default non consente di posizionare cinque elementi per riga

All’ indirizzo http://umbriawayformazione.altervista.org/uwcode/piramide.html stavamo costruendo una griglia piramidale con le righe in crescendo che aumentavano di un elemento gli ITEM, ma ci siamo bloccati sulla quinta riga che doveva mostrare cinque elementi. Usando Bootstrap il framework mette a disposizione 12 colonne per configurare gli elementi all’ interno delle righe. Nasce quindi la problematica di come posizionare cinque elementi, dal momento che le colonne all’ interno della row non verrebbero identificate con la classe 2,4 che è il risultato senza numero intero che nasce dalla divisione 12/5 per creare la griglia. Come si risolve? Impostando un CSS personalizzato, come sperimentato all’ indirizzo http://umbriawayformazione.altervista.org/uwcode/piramide1.html


<!doctype html>

<html lang="en">

  <head>


    <!-- Required meta tags -->

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xssffqQ1aoWggXA+058RXPxPgss6fy4IWvTNfh0ss263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>BS 4 Flexbox Examples</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
  
    <style>
.col-xs-2-5, 
.col-sm-2-5, 
.col-md-2-5, 
.col-lg-2-5 {
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
.col-xs-2-5 {
width: 20%;
}

@media (min-width: 768px) {
.col-sm-2-5 {
float: left;
}
.col-sm-2-5 {
width: 20%;
}
}

@media (min-width: 992px) {
.col-md-2-5 {
float: left;
}
.col-md-2-5 {
width: 20%;
}
}

@media (min-width: 1200px) {
.col-lg-2-5 {
float: left;
}
.col-lg-2-5 {
width: 20%;
}
}

  </style>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  </head>

  <body class="m-5 p-5">
<div class="row">
    <div class="col-md-2-5">
<div class="card" style="width: 18rem;">
  <img src="https://images.everyeye.it/img-notizie/miriam-leone-star-diabolik-nuda-instagram-foto-ose-v4-440331-1280x960.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
    <div class="col-md-2-5">
<div class="card" style="width: 18rem;">
  <img src="https://images.everyeye.it/img-notizie/miriam-leone-star-diabolik-nuda-instagram-foto-ose-v4-440331-1280x960.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
    <div class="col-md-2-5">
<div class="card" style="width: 18rem;">
  <img src="https://images.everyeye.it/img-notizie/miriam-leone-star-diabolik-nuda-instagram-foto-ose-v4-440331-1280x960.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
    <div class="col-md-2-5">
<div class="card" style="width: 18rem;">
  <img src="https://images.everyeye.it/img-notizie/miriam-leone-star-diabolik-nuda-instagram-foto-ose-v4-440331-1280x960.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
    <div class="col-md-2-5">
<div class="card" style="width: 18rem;">
  <img src="https://images.everyeye.it/img-notizie/miriam-leone-star-diabolik-nuda-instagram-foto-ose-v4-440331-1280x960.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>
    </div>
</div>


    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENffsz456zmM7KCkRr/rE9/Qpg6aAZGJjkl9wFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgff78PxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQG98yhjiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

  </body>

</html>

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...