HTML
NV<!doctype html>
<html lang="it">
<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://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Grid layout</title>
</head>
<style type="text/css">
.blackH1 {
background-color: #333;
color: #fff;
font-weight: 500;
letter-spacing: -0.01em;
padding: 10px 0px;
text-align: center;
text-transform: uppercase;
}
.bgColorDark {
background-color: #aaa;
color: #fff;
}
.margin5px {
margin: 5px;
}
.bgGrey {
background-color: #d5d5d5;
margin: 3px;
}
</style>
<body>
<h1 class="blackH1">Grid layout</h1>
<!----------------------------------inizio colonne a larghezza fissa------------------------->
<div class="container my-5">
<div class="row">
<div class="col-8">
<h1>Titolo 1 - articolo principale</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. Molti software di impaginazione e di web design utilizzano Lorem Ipsum come testo modello. Molte versioni del testo sono state prodotte negli anni, a volte casualmente, a volte di proposito (ad esempio inserendo passaggi ironici).</p>
</div>
<div class="col-4">
<h2>Titolo 2</h2>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. </p>
</div>
</div>
<div class="row">
<div class="col-12 col-md-6 col-lg-3">
<h2>Titolo 2</h2>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. </p>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h2>Titolo 2</h2>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. </p>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h2>Titolo 2</h2>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. </p>
</div>
<div class="col-12 col-md-6 col-lg-3">
<h2>Titolo 2</h2>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina viene distratto dal contenuto testuale se questo è leggibile. Lo scopo dell’utilizzo del Lorem Ipsum è che offre una normale distribuzione delle lettere (al contrario di quanto avviene se si utilizzano brevi frasi ripetute, ad esempio “testo qui”), apparendo come un normale blocco di testo leggibile. </p>
</div>
</div>
</div>
<!---------------------------------- fine colonne a larghezza fissa------------------------->
<!---------------------------inizio colonne a larghezza variabile-------------------->
<div class="container-fluid">
<div class="row">
<div class="col bgGrey">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col bgGrey">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col bgGrey">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col bgGrey">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="w-100"> </div>
<div class="col bgGrey">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col bgGrey">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col bgGrey">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col bgGrey">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
</div>
</div>
<!---------------------------fine colonne a larghezza variabile-------------------->
<div class="container my-5">
<div class="row">
<div class="col">
<h1>titolo 1</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col-6">
<h1>titolo 1</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col">
<h1>titolo 1</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
</div>
</div>
<div class="container mb-5">
<div class="row">
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
<div class="col-1">1</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-9 col-md-12 col-lg-9">
<div class="container">
<div class="row">
<div class="col-6">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col-6">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col-6">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col-6">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
</div>
</div>
</div>
<div class="col-3 col-md-12 col-lg-3">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<h1>titolo col3</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col-12">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
<div class="col-12">
<h1>titolo</h1>
<p>È universalmente riconosciuto che un lettore che osserva il layout di una pagina</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>