In questa lezione parleremo dei Bootstrap buttons, e quindi di come aggiungere dei pulsanti nelle nostre pagine web.
Bootstrap ha differenti stili di buttons che visualizza tramite apposite classi.
Bootstrap buttons
Vediamo in dettaglio le varie classi:
btncrea un pulsante con uno stile di base.
btn-primary crea un pulsante con sfondo blu e testo bianco.
btn-secondary crea un pulsante con sfondo grigio e testo bianco.
btn-success crea un pulsante con sfondo verde e testo bianco.
btn-info crea un pulsante con sfondo azzurro e testo bianco.
btn-warning crea un pulsante con sfondo arancione e testo nero.
btn-danger crea un pulsante con sfondo rosso e testo bianco.
btn-light crea un pulsante con sfondo grigio chiaro e testo nero.
btn-dark crea un pulsante con sfondo nero e testo bianco.
btn-link crea un pulsante con sfondo trasparente e testo blu.
Come si utilizzano
Le classi dei Bootstrap buttons si utilizzano con il tag button ma possono essere utilizzate anche con il tag input oppure anche il tag a a cui però deve essere associato l’attributo role=”button” in modo da essere interpretati bene anche dagli screen reader.
Eliminare il riempimento
Se si vuole rimuovere il contorno dai pulsanti si possono utilizzare le classi btn-outline-dark, btn-outline-warning, ecc…
Dimensioni del pulsante
Se si desidera un pulsante di dimensione minore o maggiore si può usare btn-lg oppure btn-sm.
Pulsanti disabilitati
Un pulsante può essere reso inattivo con l’attributo disabled.
Pulsanti estesi
Per estendere la larghezza di un pulsante per tutto il livello che lo contiene si usa btn-block.
Active
La classe active rende l’aspetto del pulsante come quando si fa clic su di esso.
Esempi d’uso dei buttons
Realizziamo adesso degli esempi mettendo in pratica quanto spiegato finora.
Al seguente link potete vedere la pagina di esempio che vi mostra i pulsanti: Bootstrap buttons.
Di seguito la parte di codice inerenti i pulsanti che ho creato che potete inserire nel punto della pagina desiderato.
In questa lezione parleremo di Bootstrap images e quindi di come Bootstrap tratta le immagini in maniera responsive.
Ricordiamo che con il termine responsive si intende che il contenuto è ridimensionato in maniera automatica alla dimensione del display.
Bootstrap images
Utilizzando il tag img e la classe img-fluid, l’immagine si visualizza correttamente su tutti i dispositivi.
Realizziamo dunque un esempio utilizzando il tag semantico figure e figcaption.
Inserite questo codice nella vostra pagina web, anche dopo il tag di chiusura nav. Chiaramente al posto di img/img-2.jpg inserite il nome della vostra immagine.
Esempio d’uso di Bootstrap images:
<div class="container pt-5">
<div class="row">
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-2.jpg" class="figure-img img-fluid" alt="sfondo">
<figcaption class="figure-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
</div>
</div>
</div>
Nella riga, all’interno dell’apposito container, abbiamo inserito due colonne, infatti utilizziamo la classe col-sm-6. Nella prima colonna inseriamo il testo segnaposto utilizzato come testo di esempio, mentre nella seconda inseriamo l’immagine scelta.
Ricordiamo che con col-sm le colonne si visualizzano una accanto all’altra a partire dai dispositivi small, come descritto nell’articolo sul grid system: Bootstrap grid system.
All’immagine diamo le classi figure-img e img-fluid, quest’ultima come abbiamo detto prima garantisce una corretta visualizzazione su tutti i dispositivi.
Per inserire un’immagine con bordi arrotondati basta inserire sempre all’interno di img la classe rounded.
Se poi desideriamo racchiudere l’immagine in un cerchio utilizziamo invece la classe rounded-circle.
La classe img-thumbnail serve a dare un bordo di 1px.
Facciamo dunque un esempio d’uso di Bootstrap images:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<title>Template Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background:#3f675e">
<div class="container p-2">
<a class="navbar-brand" href="#">Coding Creativo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove siamo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Link utili
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Contatti</a>
<a class="dropdown-item" href="#">Form</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div id="carouselExampleIndicators" class="carousel slide carousel-fade" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" >
<div class="carousel-item active" >
<img src="img/slide-1.jpg" class="d-block w-100" alt="coding" >
</div>
<div class="carousel-item">
<img src="img/slide-5.jpg" class="d-block w-100" alt="fare coding">
</div>
<div class="carousel-item">
<img src="img/slide-3.jpg" class="d-block w-100" alt="coding a scuola">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-1.jpg" class="figure-img img-fluid rounded" alt="immagine di sfondo">
<figcaption class="figure-caption">Titolo immagine</figcaption>
</figure>
</div>
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm-6">
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="col-sm-6">
<figure class="figure">
<img src="img/img-2.jpg" class="figure-img img-fluid img-thumbnail" alt="sfondo">
<figcaption class="figure-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</figcaption>
</figure>
</div>
</div>
</div>
<div class="container pt-5">
<div class="row">
<div class="col-sm-3">
<figure class="figure">
<img src="img/farfalla.jpg" class="figure-img img-fluid rounded-circle" alt="immagine di sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img2.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img3.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
<div class="col-sm-3">
<figure class="figure">
<img src="img/img4.jpg" class="figure-img img-fluid rounded-circle" alt="sfondo">
<figcaption class="figure-caption">Descrizione dell'immgagine, si può inserire un testo descrittivo o un titolo in questo punto.</figcaption>
</figure>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Nel vostro browser visualizzerete una serie di immagini distribuite su colonne che si adattano in maniera automatica a tutti i dispositivi. Provate dunque la pagina nelle diverse risoluzioni.
Nelle prossime lezioni parleremo ancora di come gestire le immagini in Bootstrap e di come inserire degli effetti.
Analizziamo adesso il codice che abbiamo utilizzato per la creazione del carousel.
L’utilizzo di carousel richiede un id per far funzionare correttamente i controlli, nel nostro esempio l’id è carouselExampleIndicators.
Nel div abbiamo anche specificato le classi:
carousel prende le specifiche dello slideshow;
slide aggiunge una transizione CSS e un effetto di animazione;
carousel-fade aggiunge un effetto a scomparsa tra un’immagine e l’altra.
Dopo il div principale abbiamo inserito un elenco ordinato con i punti elenco che rappresentano gli indicatori, ovvero i punti che si trovano nella parte inferiore di ciascuna immagine. Cliccando su questi punti è possibile scorrere le immagini.
<ol class="carousel-indicators">
A questo elenco abbiamo assegnato la classe carousel-indicator. Ogni punto elenco ha un attributo data-target che punta all’id del carousel. Possiede anche un attributo data-slice-to che specifica su quale immagine andare quando si fa clic sul punto.
Dopo si crea un livello che contiene le nostre immagini a cui si assegna la classe carousel-inner mentre al livello che contiene ciascuna immagine viene assegnata la classe carousel-item.
Per essere visibile il carousel dobbiamo aggiungere la classe active a una delle immagini.
Infine abbiamo le frecce destra e sinistra per scorrere le immagini. Si crea un collegamento ipertestuale a cui si assegna la classe carousel-control-prev per andare indietro nelle slide, e carousel-control-next per andare avanti.
Le classi carousel-control-prev-icon e carousel-control-next-icon fanno visualizzare le frecce per scorrere le immagini.
Personalizzate il vostro carousel come meglio credete, i più esperti possono intervenire anche sul foglio di stile.
In questa lezione approfondiremo l’argomento Bootstrap Container che abbiamo accennato nella lezione precedente.
Abbiamo quindi capito che Bootstrap ha un elemento contenitore che racchiude gli elementi di un sito web.
Bootstrap Container
Dunque possiamo adesso distinguere due classi.
Container fluid
La classe container-fluid fornisce un contenitore a larghezza intera, cioè che ricopre l’intera larghezza della finestra a prescindere dalla risoluzione.
Container
La classe container restituisce un contenitore a larghezza fissa.
Questa larghezza cambia a seconda delle dimensioni dello schermo.
Nella scorsa lezione abbiamo parlato di dispositivi con risoluzione extra small, small, medium, large ed extra large.
Dunque la max-width dei container nei dispositivi extra small è comunque del 100%.
Mentre la max-width dei container nei dispositivi smallè di 540px.
Invece la max-widthdei container nei dispositivi mediumè di 720px.
La max-width dei container nei dispositivi largeè di 960px.
La max-width dei container nei dispositivi extra largeè di 1140px.
Container Responsive
Possiamo anche utilizzare le seguenti classi:
La classe container-sm visualizza il contenuto all’interno del container al 100% sui dispositivi extra-small per gli altri dispositivi permangono le stesse proprietà elencate sopra.
Invece la classe container-md visualizza il contenuto all’interno del container al 100%sui dispositivi small e inferiori mentre per gli altri dispositivi permangono le stesse proprietà elencate sopra.
La classe container-lg visualizza il contenuto all’interno del container al 100% sui dispositivi medium e inferiori mentre per gli altri dispositivi permangono le stesse proprietà elencate sopra.
Infine la classe container-xl visualizza il contenuto all’interno del container al 100% sui dispositivi large e inferiori mentre sui dispositivi extra-large permane la stessa proprietà elencata sopra.
Provate ad inserire questi contenitori con le 4 classi diverse e con il bordo in modo da capire il loro comportamento.
Dopo provate ad allargare e restringere la finestra del browser.
<div class="container-md border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<div class="container-lg border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<div class="container-xl border">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
Esempio
Facciamo un esempio pratico realizzando una semplice pagina web di esempio.
Notate la disposizione del logo testuale e del menù rispetto alla dimensione della pagina nelle varie risoluzioni.
<!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="css/bootstrap.min.css">
<title>Template Bootstrap</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary ">
<div class="container">
<a class="navbar-brand" href="#">Coding Creativo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Chi siamo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Dove siamo</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Link utili
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Contatti</a>
<a class="dropdown-item" href="#">Form</a>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Padding del container
Di default il padding del container impostato è di 15px sia a destra sia a sinistra, senza padding superiore o inferiore.
Per migliorare la leggibilità del testo allora aggiungiamo un padding superiore ed inferiore di 0.5rem (p-2) al primo container mentre al secondo container aggiungiamo un padding superiore di 3rem (pt-5), in questo modo:
Ricordiamo che rem è un’unità di misura relativa che ha il vantaggio di riferirsi alla misura del root e quindi di rendere proporzionali le dimensioni di font, padding e di tanti altri elementi.
In base al valore impostato nel root di Bootstrap 1rem equivale a 16px e così via.
In questa lezione parleremo del Bootstrap grid system.
Infatti quando creiamo una pagina web utilizzando Bootstrap, utilizziamo una struttura a griglia, chiamata grid system. All’interno del grid system sono posizionati i contenuti, chiamati components, suddivisi per colonne.
Questa guida fa riferimento a Bootstrap 4 e la differenza fondamentale è che Bootstrap4 utilizza la flexbox, anziché i float come nella versione 3.
Bootstrap grid system
Gli elementi base del layout di Bootstrap sono i containers.
Questi componenti sono fondamentali per organizzare lo spazio nel sistema a griglie.
Il sistema a griglia di Bootstrap può contenere fino a 12 colonne al massimo.
Quindi immaginiamo una pagina divisa in 12 colonne, dove ciascuna colonna può avere una dimensione che va da 1/12 fino a 12/12. Ovviamente in quest’ultimo caso si avrà una sola colonna che occupa tutto lo spazio disponibile.
Il sistema a griglia di Bootstrap come abbiamo già detto è responsive e le colonne si riorganizzeranno in base alle dimensioni dello schermo.
Quindi su un grande schermo potrebbe apparire migliore con il contenuto organizzato ad esempio in tre colonne, ma su un piccolo schermo sarebbe meglio se gli elementi di contenuto fossero impilati uno sopra l’altro.
Esempio grid system
Dunque, per iniziare creiamo semplicemente un contenitore con una classe container e utilizziamo le righe per creare gruppi orizzontali dove inserire un numero variabile di colonne.
Quindi ogni riga deve essere posizionata all’interno del container. Nel nostro esempio utilizziamo la classe predefinita row per ciascuna riga.
Inoltre ciascun contenuto deve essere posizionato all’interno delle colonne e solo le colonne possono essere figlie immediate delle righe.
Facciamo subito un esempio inserendo dopo nav questo codice:
<div class="container">
<div class="row">
<div class="col-sm">
<h2>HTML5<h2>
<p class="lead">HTML5 è un linguaggio che consente di creare pagine web</p>
</div>
<div class="col-sm">
<h2>CSS3<h2>
<p class="lead">I CSS3 consentono di dare uno stile ad una pagina web</p>
</div>
<div class="col-sm">
<h2>Bootstrap<h2>
<p class="lead">Bootstrap è un framework utilizzato per creare siti web responsive con facilità</p>
</div>
</div>
</div>
Il vantaggio nell’uso delle flexbox è che le colonne della griglia senza una larghezza specificata avranno automaticamente uguale larghezza e altezza.
Quindi se ad esempio impostiamo tre colonne con col-sm saranno larghe automaticamente ciascuna il 33,33% della larghezza del dispositivo fino a schermi a partire da 576px.
Il risultato sarà dunque un layout con tre colonne di uguale larghezza nella versione desktop mentre nella versione su schermo ridotto le colonne saranno impilate una sotto l’altra.
Le larghezze delle colonne sono espresse in percentuale, quindi sono sempre fluide e dimensionate rispetto al loro elemento padre.
Prefissi delle classi
Ci sono dei prefissi che stabiliscono la modalità di visualizzazione delle colonne basate sulle media query. Ho trattato l’argomento sulle media query in questo link: https://www.codingcreativo.it/css-responsive/.
Questi prefissi stabiliscono i breakpoint ovvero la dimensione minima che crea il cambiamento delle colonne.
Dispositivi extra small dimensione in pixel minori di 576px. Smartphone con visualizzazione verticale (portrait).
Dispositivi smalldimensione in pixel maggiore o uguale di 576pxma minore di 768px. Smartphone con visualizzazione orizzontale (landscape).
Dispositivi medium dimensione in pixel maggiore o uguale di 768pxma minore di 992px. Tablet.
Dispositivi large dimensione in pixel maggiore o uguale di 992pxma minore di 1200px. Laptop.
Dispositivi extra large dimensione in pixel maggiore o uguale di 1200px. Laptop e desktop.
Quindi se consideriamo le classi:
.col-le colonne sono sempre impostate le une accanto alle altre, si va a capo in maniera automatica.
.col-smle colonne si visualizzano una accanto all’altra a partire dai dispositivi small, dunque solo negli extra-small le colonne sono impilate una sull’altra.
.col-md le colonne si visualizzano una accanto all’altra a partire dai dispositivi medium, dunque nei dispositivi inferiori le colonne sono impilate una sull’altra.
.col-lg le colonne si visualizzano una accanto all’altra a partire dai dispositivi large, mentre nei dispositivi inferiori le colonne sono impilate una sull’altra.
.col-xl le colonne si visualizzano una accanto all’altra a partire dai dispositivi extra-large, invece nei dispositivi inferiori le colonne sono impilate una sull’altra.
Si può indicare anche il numero delle colonne. Ad esempio:
.col-md-3
In questo caso si possono sistemare 4 colonne (12/3=4) su una stessa riga.
In questa lezione abbiamo parlato di Bootstrap grid system nella prossima lezione approfondiremo i containers.
Si può allineare il menù anche partendo dal lato opposto, ovvero dall’ultima voce, basterà dunque assegnare la classe flex-row-reverse ad ul in questo modo:
Abbiamo personalizzato il Bootstrap Nav esaminando alcune classi utili a posizionare gli elementi del nostro menù, nella prossima lezione studieremo ancora altre classi per personalizzare la nostra nav.
