Bootstrap Container, adattare il contenuto di una pagina

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-width dei 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:

  <div class="container p-2">
      ....
  <div class="container pt-5">

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.

Lezione precedente: Bootstrap grid system

Lezione successiva: Bootstrap Carousel