Come realizzare una pagina web responsive con Bootstrap

bootstrap guida tutorial

La settimana scorsa abbiamo introdotto Bootstrap, un fantastico framework gratuito pronto all’uso per la creazione dei nostri siti web responsive.

Dopo parecchia teoria che sta alla base del funzionamento del grid system di Bootstrap, oggi vedremo di realizzare una vera e propria pagina web, impaginando diversi elementi grafici, testi, bottoni, menù.

Riprendiamo quindi con una pagina HTML vuota, contenente già il CSS e i JavaScript per il corretto funzionamento di Bootstrap. Per comodità, potete scaricare la pagina da qui.

Apritela con il vostro editor di testo, e siamo pronti a iniziare.

 

Creare una Navigation Bar con Bootstrap

La prima cosa che andremo a inserire nella pagina, sarà una barra di navigazione in alto, dove saranno presenti i link alle diverse pagine del sito. Il nostro obiettivo è quindi realizzare una barra simile a questa.

 

guida bootstrap navigation bar navbar

 

Bootstrap permette di creare delle navigation bar avanzate, totalmente responsive, personalizzabili per ogni esigenza. Andiamo a incollare il seguente codice nel body della nostra pagina html.

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  
</nav>

Questa riga di codice creerà una banda nera (navbar-dark e bg-dark), fissa in alto (fixed-top). Se non ci piacesse il colore scuro, o volessimo che la banda scorra assieme al resto della pagina, non dovremmo fare altro che rimuovere le relative classi.

All’interno della nav, ora inseriamo un Contenitore, con al suo interno il brand della nostra attività, in questo caso, Chicche di Nerd. Lo inseriamo come collegamento ipertestuale, in modo che cliccandoci sopra, si torni alla homepage, o un’altra pagina a vostra scelta.

<div class="container">
  <a class="navbar-brand" href="#">Chicche di Nerd</a>
  
</div>

Adesso bisognerà inserire le voci di menù per navigare nelle diverse pagine del sito, home, chi siamo, servizi, contatti, ecc …

Il problema è che, mentre su un monitor grande, queste voci possono stare tutte una affianco all’altra, se invece dovessimo guardare il sito da un cellulare, avremmo tutte le voci sovrapposte.

Bootstrap ci viene in soccorso, come sempre, senza che dobbiamo preoccuparci di nulla.

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarResponsive">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Chi siamo</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Servizi</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contatti</a>
    </li>
  </ul>
</div>

Il primo elemento che siamo andati a inserire è un bottone, che però sarà visibile esclusivamente da cellulare, e premendolo,  mostrerà il menù sottoforma di tendina.

Con monitor più larghi, invece, il bottone sarà invisibile.

Il secondo elemento è un div, contenente un elenco (ul) di voci di menù (li). Ognuna poi linkerà a una determinata pagina del sito web.

Potete vedere il risultato attuale della pagina con la barra di navigazione cliccando qui.

Vi sono tantissime altre configurazioni aggiuntive per la navbar, e le potete trovare ovviamente nella documentazione ufficiale in inglese di Bootstrap.

Attenzione: dato che abbiamo impostata la barra di navigazione fissa in alto, dobbiamo aggiungere un padding al body del sito, così che non vengano nascosti dietro elementi a inizio pagina.

<style>
  body {	padding-top: 54px;	}
</style>

 

Immagini responsive con Bootstrap

Quello a cui vorremo arrivare adesso invece, è un risultato di questo genere. Inserire un’immagine, e a fianco, una breve descrizione dell’azienda.

Innanzitutto, inseriremo un Contenitore che sarà la nostra vera e propria pagina da qui in avanti.

Al suo interno, una riga.

<div class="container">
  <div class="row my-4">

  </div>
</div>

Applicando la classe my-4 stiamo andando a dare un margin (m) sia top, sia bottom (quindi sull’asse y). Come vedete, grazie a Bootstrap, evitiamo di scrivere ulteriori css, semplificandoci tantissimo il lavoro.

Questa row, adesso, la divideremo in due div. Il primo, occuperà 8 colonne (su 12 disponibili per ogni riga), e conterrà l’immagine.

<div class="col-lg-8">
  <img class="img-fluid rounded" src="img/banner.jpg" alt="Chicche di Nerd">
</div>

Con la classe img-fluid andiamo a impostare una larghezza automatica all’immagine, così che sia responsive. Allo stringersi del div, su dispositivi mobile, anche questa si restringerà di conseguenza.

Applicando infine la classe rounded, andremo a dare un bordo con angoli arrotondati all’immagine, perché ci piace di più graficamente.

Nota bene: il div ha come classe col-lg-8. Questo significa che per dispositivi larghi (lg) e successivi, quindi molto larghi (xl), occuperà 8 colonne della row. Non avendo indicato niente per i dispositivi più stretti small (sm) e medi (md), questi occuperanno di default tutte e 12 le colonne. Se volessimo che anche su Tablet (dispositivo md) l’immagine occupasse solo 8 colonne, dovremmo scrivere col-md-8.

Adesso, sempre all’interno della row attuale, andiamo a occupare le restanti 4 colonne con un div contenente del testo e un bottone.

<div class="col-lg-4">
  <h1>Chicche di Nerd</h1>

  <p>Dal 2017 forniamo guide, tutorial, vere chicche da nerd attraverso il nostro blog. Potete trovare articoli su videogiochi, serie tv, film, computer, e molto altro ancora!</p>

  <a class="btn btn-warning btn-lg" href="#">Visita il blog!</a>
</div>

Ecco quindi un div, col-lg-4, contenente un header1 come titolo, un paragrafo con del testo, e un collegamento.

Con Bootstrap abbiamo a disposizione delle classi per rendere graficamente gli elementi (siano input, button, div, span, a, ecc) come dei bottoni.

La classe btn formatterà graficamente l’elemento a forma di bottone. btn-warning gli darà un colore di sfondo giallo, btn-lg gli darà una dimensione più grande.

Se volete un altro colore, potete sostituire btn-warning con btn-success, btn-danger, btn-primary, ecc …

Se non volete il bottone così grande, rimuovete la classe btn-lg o addirittura sostituitela con btn-sm.

 

Bootstrap utilizza delle classi “parlanti”, quindi è facile intuire le varie modifiche che si possono apportare, come ad esempio passare da un bottone largo (lg) a uno small (sm).

Bene, se avete seguito tutto alla lettera, dovreste aver raggiunto l’obiettivo che vi avevo mostrato poco fa.

Qui di seguito, il codice scritto finora, mentre la pagina funzionante la trovate cliccando qui.

<!doctype html>
<html lang="it" class="h-100">
<head>
  <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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Sito responsive</title>

  <style>
    body {	padding-top: 54px;	}
  </style>

</head>

<body>



<!-- Barra di navigazione -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Chicche di Nerd</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <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="#">Servizi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contatti</a>
        </li>
      </ul>
    </div>
  </div>
</nav>



<!-- Pagina (contenitore) -->

<div class="container">


  <!-- Prima riga, con Immagine e Testo -->
  
  <div class="row my-4">
    <div class="col-lg-8">
      <img class="img-fluid rounded" src="img/banner.jpg" alt="Chicche di Nerd">
    </div>

    <div class="col-lg-4">
      <h1>Chicche di Nerd</h1>
      <p>Dal 2017 forniamo guide, tutorial, vere chicche da nerd attraverso il nostro blog. Potete trovare articoli su videogiochi, serie tv, film, computer, e molto altro ancora!</p>
      <a class="btn btn-warning btn-lg" href="#">Visita il blog!</a>
    </div>
  </div>









  
</div>







<!-- jQuery, poi Popper.js, infine Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

 

Le Cards di Bootstrap

Utilizzando Bootstrap scoprirete che nel framework sono stati inventati e creati dei componenti che non esistono nativamente nell’HTML. Un esempio sono le Cards.

Le Cads sono dei contenitori, dove poter inserire un po’ di tutto, immagini, testo, titoli, informazioni. Pensiamo alle Cards come all’evoluzione dei Divs in HTML. Grazie però a Boostrap, queste Cards hanno una grafica uniforme, diverse varianti e parecchie opzioni differenti.

Ora inseriremo ad esempio una Card con il motto di Chicche di Nerd.

<div class="card text-white bg-secondary my-4 text-center">
  <div class="card-body">
    <p class="text-white m-0">Nerd is the new sexy!</p>
  </div>
</div>

La Card si porta dietro con se un contenitore con un bordo grigio e gli angoli arrotondati, di default.

In questo esempio, abbiamo poi detto che avrà uno sfondo scuro (bg-secondary) e testo bianco (text-white) centrato (text-center). Infine, come per il blocco sopra, mettiamo del margine top e bottom (my-4) così da distanziare gli elementi.

Non avendo indicato larghezze, colonne, nulla, la Card sarà larga il 100% del suo contenitore padre, in questo caso, il Container.

 

guida bootstrap card

 

Ed ecco che nella nostra pagina è apparsa questa banda grigia, come preannunciato.

Sempre rimanendo nell’ambito delle  Cards, ora le sfrutteremo per dire qualcosa riguardo ai temi trattati sul sito web. Metteremo 3 Cards una affianco all’altra, sulla stessa riga.

Se avete quindi ormai appreso i segreti del grid system di Bootstrap, avrete già intuito che ognuna di queste 3 Cards avrà una larghezza di 4 colonne, così da sfruttare tutte e 12 le colonne a disposizione in una riga. Ecco il risultato che ora ci prefiggiamo di raggiungere.

 

 

Inseriamo come prima cosa una nuova riga, con 3 div larghi 4 colonne ognuno.

<div class="row">
  <div class="col-md-4 mb-4">
    
  </div>

  <div class="col-md-4 mb-4">
    
  </div>

  <div class="col-md-4 mb-4">
    
  </div>
</div>

La classe col-md-4 indicherà appunto che ogni div sarà largo 4 colonne per i dispositivi medi (md) e successivi (lg e xl). Mentre, non avendo impostato niente per misure minori, su dispositivi small verranno occupate tutte e 12 le colonne.

Con mb-4 diamo un margin bottom (inferiore) agnuno dei 3 div.

Dentro a ognuno dei 3 div andremo a inserire una Card strutturata nel seguente modo.

<div class="card h-100">

  <h4 class="card-header">Videogiochi</h4>

  <div class="card-body">
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
  </div>

  <div class="card-footer">
    <a href="#" class="btn btn-warning">Approfondisci</a>
  </div>
</div>

Ogni Card sarà alta il 100% della riga (h-100) ed è strutturata con un intestatione (card-header), un corpo (card-body) con del testo, e un pié (card-footer) con un bottone.

Penserà poi Bootstrap a colorare di grigio header e footer, ad allineare il titolo, il testo, il bottone e ogni altro componente contenuto nella Card.

Il codice html per tutte e 3 le Cards è il seguente

<div class="row">
  <div class="col-md-4 mb-4">
    <div class="card h-100">
      <h4 class="card-header">Videogiochi</h4>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-warning">Approfondisci</a>
      </div>
    </div>
  </div>

  <div class="col-md-4 mb-4">
    <div class="card h-100">
      <h4 class="card-header">Film</h4>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-warning">Approfondisci</a>
      </div>
    </div>
  </div>

  <div class="col-md-4 mb-4">
    <div class="card h-100">
      <h4 class="card-header">Serie TV</h4>
      <div class="card-body">
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
      </div>
      <div class="card-footer">
        <a href="#" class="btn btn-warning">Approfondisci</a>
      </div>
    </div>
  </div>
</div>

 

Potete già notare come, allargando o stringendo la pagina, i vari componenti si vadano ad allineare a seconda che si passi da un monitor desktop, tablet o cellulare. Potete provare direttamente a questo indirizzo.

Nota bene: nel caso non avessimo messo la classe h-100 alle 3 Cards, ognuna sarebbe stata alta più o meno a seconda del testo in essa contenuta. Con h-100 invece, abbiamo forzato tutte e 3 le Cards a essere alte tanto quanto la maggiore, ottenendo un effetto grafico più ordinato, allineato, preciso.

Potete fare una prova rimuovendo la classe h-100 e vedere i reali cambiamenti. Qui di seguito vi mostro com’è con h-100.

 

 

E invece qui senza h-100.

 

 

Un sincero grazie a Bootstrap che ci permette di fare queste cose!!

 

Ulteriori Cards responsive

Proseguiamo con la nostra pagina web! Ora utilizzeremo nuovamente le Cards di Bootstrap per andare a creare un elenco di anteprime di articoli del sostro blog, molto simili a come li vedete nella nostra homepage di Chicche di Nerd.

Il risultato finale a cui aspireremo sarà questo

 

So già che la vostra mente avrà pensato a come sfruttare le Cards per questa nuova impaginazione.

Inutile dirlo, si inizierà inserendo un titolo <h2> o come preferite voi, e a seguire una nuova row. All’interno di questa row vi saranno i div, ognuno largo 4 colonne, in modo che dopo 3 div, il 4° andrà a capo, e così via.

<h2>Chicche recenti</h2>

Normalissimo titolo h2. E subito sotto, la nuova riga con i 6 div.

<div class="row">
  <div class="col-lg-4 col-sm-6 mb-4">
    
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    
  </div>
</div>

In questo caso, contrariamente ai 3 div precedenti, abbiamo concatenato diverse classi, per diversi comportamenti al variare della larghezza del monitor.

Non avendo indicato nulla per dispositivi piccolissimi (xs), questi saranno larghi tutte e 12 le colonne, mostrando 1 articolo per riga.

Per dispositivi piccoli (sm) e successivi (md) verranno usate 6 colonne ognuno (col-sm-6), permettendo così di mostrare 2 articoli per riga.

Per dispositivi larghi (lg) e successivi (xl) verranno usate 4 colonne ognuno (col-lg-4), permettendo di mostrare 3 articoli per riga.

Infine è stato aggiunto un margin-bottom a ogni div.

All’interno di ogni div, ora inseriremo una Card così strutturata

<div class="card h-100">

  <a href="#"><img class="card-img-top" src="img/art1.jpg" alt=""></a>

  <div class="card-body">
    <h4 class="card-title">
      <a href="#" class="text-warning">Tomb Raider</a>
    </h4>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt?</p>
  </div>
</div>

Si può vedere subito che in questa Card ho omesso sia l’header, sia il footer, perché non mi servivano, mentre ho aggiunto un’immagine in alto, prima del body.

Sia l’immagine, sia il titolo sono dei link, così che l’utente interessato all’articolo, cliccandoci, possa andare a leggersi l’articolo completo.

Trovate la pagina sviluppata finora qui, e il codice HTML di questa parte è quindi il seguente

<h2>Chicche recenti</h2>


<div class="row">
  <div class="col-lg-4 col-sm-6 mb-4">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="img/art1.jpg" alt=""></a>
      <div class="card-body">
        <h4 class="card-title">
          <a href="#" class="text-warning">Tomb Raider</a>
        </h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="img/art2.jpg" alt=""></a>
      <div class="card-body">
        <h4 class="card-title">
          <a href="#" class="text-warning">Arrow, Flash, Supergirl</a>
        </h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="img/art3.jpg" alt=""></a>
      <div class="card-body">
        <h4 class="card-title">
          <a href="#" class="text-warning">Bloodborne</a>
        </h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="img/art4.jpg" alt=""></a>
      <div class="card-body">
        <h4 class="card-title">
          <a href="#" class="text-warning">iPhone</a>
        </h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="img/art5.jpg" alt=""></a>
      <div class="card-body">
        <h4 class="card-title">
          <a href="#" class="text-warning">Mac OS X</a>
        </h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
      </div>
    </div>
  </div>
  <div class="col-lg-4 col-sm-6 mb-4">
    <div class="card h-100">
      <a href="#"><img class="card-img-top" src="img/art6.jpg" alt=""></a>
      <div class="card-body">
        <h4 class="card-title">
          <a href="#" class="text-warning">Supereroi DC</a>
        </h4>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
      </div>
    </div>
  </div>
</div>

 

Footer della pagina

Nella pagina web si potrebbero aggiungere ancora un’infinità di cose, come ad esempio, qualche informazione ulteriore riguardo ad orari, assistenza, numeri di telefono, ecc…

 

guida bootstrap footer

 

<hr>

<div class="row mb-4">
  <div class="col-md-8">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
  </div>
  <div class="col-md-4">
    <a class="btn btn-lg btn-secondary btn-block" href="#">Contattaci</a>
  </div>
</div>

Con queste righe di codice abbiamo creato un’ulteriore riga, dividendola in 2 parti, un div largo 8 colonne da Tablet (md) in poi, e un div largo le restanti 4 colonne con all’interno un bottone.

Se notate, il bottone è come negli altri casi, un <a href="..."> con la classe btn, e in più questa volta ha anche btn-block per far sì che il bottone sia largo tutto il div.

Tutto quello scritto finora, era all’interno del container, affinché fosse impaginato e centrato nel browser.

Ora non ci resta che aggiungere l’intestazione a pié di pagine, in un footer, esterno al container.

 

<footer class="py-5 bg-dark">
  <div class="container">
    <p class="m-0 text-center text-white">Copyright &copy; Chicche di Nerd 2017</p>
  </div>
</footer>

Come per la navbar, anche al footer impostiamo un colore di sfondo scuro (bg-dark), e diamo un padding sopra e sotto (py-5)

Al testo all’interno del paragrafo, rimuoviamo ogni eventuale margine (m-0), centriamo il testo (text-center) e lo coloriamo di bianco (text-white).

Bene, la nostra prima pagina HTML totalmente responsive, grazie a Bootstrap, è ultimata, e potete trovarla a questo indirizzo. Nei prossimi tutorial vedremo come creare un form di registrazione responsive, e l’uso avanzato delle tabelle, grazie a una libreria esterna compatibile con Bootstrap.

 

<!doctype html>
<html lang="it" class="h-100">
<head>
  <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-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>Sito responsive</title>

  <style>
    body {	padding-top: 54px;	}
  </style>
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container">
    <a class="navbar-brand" href="#">Chicche di Nerd</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <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="#">Servizi</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contatti</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">


  <div class="row my-4">
    <div class="col-lg-8">
      <img class="img-fluid rounded" src="img/banner.jpg" alt="Chicche di Nerd">
    </div>

    <div class="col-lg-4">
      <h1>Chicche di Nerd</h1>
      <p>Dal 2017 forniamo guide, tutorial, vere chicche da nerd attraverso il nostro blog. Potete trovare articoli su videogiochi, serie tv, film, computer, e molto altro ancora!</p>
      <a class="btn btn-warning btn-lg" href="#">Visita il blog!</a>
    </div>
  </div>

  <div class="card text-white bg-secondary my-4 text-center">
    <div class="card-body">
      <p class="text-white m-0">Nerd is the new sexy!</p>
    </div>
  </div>

  <div class="row">
    <div class="col-md-4 mb-4">
      <div class="card h-100">
        <h4 class="card-header">Videogiochi</h4>
        <div class="card-body">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-warning">Approfondisci</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card h-100">
        <h4 class="card-header">Film</h4>
        <div class="card-body">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod tenetur ex natus at dolorem enim! Nesciunt pariatur voluptatem sunt quam eaque, vel, non in id dolore voluptates quos eligendi labore.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-warning">Approfondisci</a>
        </div>
      </div>
    </div>

    <div class="col-md-4 mb-4">
      <div class="card h-100">
        <h4 class="card-header">Serie TV</h4>
        <div class="card-body">
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem magni quas ex numquam, maxime minus quam molestias corporis quod, ea minima accusamus.</p>
        </div>
        <div class="card-footer">
          <a href="#" class="btn btn-warning">Approfondisci</a>
        </div>
      </div>
    </div>
  </div>

  <h2>Chicche recenti</h2>

  <div class="row">
    <div class="col-lg-4 col-sm-6 mb-4">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="img/art1.jpg" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#" class="text-warning">Tomb Raider</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet numquam aspernatur eum quasi sapiente nesciunt? Voluptatibus sit, repellat sequi itaque deserunt, dolores in, nesciunt, illum tempora ex quae? Nihil, dolorem!</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mb-4">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="img/art2.jpg" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#" class="text-warning">Arrow, Flash, Supergirl</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mb-4">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="img/art3.jpg" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#" class="text-warning">Bloodborne</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos quisquam, error quod sed cumque, odio distinctio velit nostrum temporibus necessitatibus et facere atque iure perspiciatis mollitia recusandae vero vel quam!</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mb-4">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="img/art4.jpg" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#" class="text-warning">iPhone</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mb-4">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="img/art5.jpg" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#" class="text-warning">Mac OS X</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
        </div>
      </div>
    </div>
    <div class="col-lg-4 col-sm-6 mb-4">
      <div class="card h-100">
        <a href="#"><img class="card-img-top" src="img/art6.jpg" alt=""></a>
        <div class="card-body">
          <h4 class="card-title">
            <a href="#" class="text-warning">Supereroi DC</a>
          </h4>
          <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque earum nostrum suscipit ducimus nihil provident, perferendis rem illo, voluptate atque, sit eius in voluptates, nemo repellat fugiat excepturi! Nemo, esse.</p>
        </div>
      </div>
    </div>
  </div>

  <hr>

  <div class="row mb-4">
    <div class="col-md-8">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
    </div>
    <div class="col-md-4">
      <a class="btn btn-lg btn-secondary btn-block" href="#">Contattaci</a>
    </div>
  </div>

</div>

<!-- Footer -->
<footer class="py-5 bg-dark">
  <div class="container">
    <p class="m-0 text-center text-white">Copyright &copy; Chicche di Nerd 2017</p>
  </div>
</footer>

<!-- jQuery, poi Popper.js, infine Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>