Bootstrap CSS: cosa è e come utilizzarlo

Bootstrap è il toolkit CSS più popolare nell’ambito del web development.

Questo framework mette a disposizione degli sviluppatori delle classi CSS e dei componenti JavaScript per costruire applicazioni mobile responsive, graficamente gradevoli, che garantiscono accessibilità ottimale.

Riguardo all’accessibilità, Bootstrap mette a disposizione degli strumenti che consentono di creare pagine web facilmente accessibili alle persone con disabilità, che devono usare strumenti come i lettori di schermi.

Per ulteriori approfondimenti in merito, ti consiglio di visitare la pagina di Wikipedia dedicata alla Web accessibility.

Indice

I componenti di Boostrap

Bootstrap mette a disposizione alcuni componenti pronti per essere utilizzati.

Alcuni di questi funzionano solamente grazie alle classi CSS implementate in Bootstrap, altri fanno anche uso del codice JavaScript presente nel framework.

Accordion
Alerts
Badge
Breadcrumb
Buttons
Button group
Card
Carousel
Close button
Collapse
Dropdowns
List group
Modal
Navs tabs
Navbar
Offcanvas
Pagination
Popovers
Progress
Scrollspy
Spinners
Toasts
Tooltips

Nel seguito dell’articolo approfondiremo l’utilizzo di alcuni di questi componenti.

Il grid system di Bootstrap

Il grid system di Bootstrap è l’elemento più utilizzato e noto del framework.

Consiste in un sistema di classi CSS che consente di posizionare i contenuti in maniera efficace e semplice per tutte le risoluzioni disponibili.

Il sistema si basa sull’utilizzo di tre elementi:

l’elemento container
il tag row
gli elementi col

Questi elementi vengono utilizzati congiuntamente ai breakpoints.

Ogni breakpoint individua un range di applicazione relativamente alla risoluzione del dispositivo che sta visualizzando la pagina web che fa uso di Bootstrap.

Questi breakpoint sono:

Extra small (xs)
Small (sm)
Medium (md)
Large (lg)
Extra large (xl)
Extra extra large (xxl)

Gli intervalli di applicazione dei breakpoints sono riepilogati nella tabella di seguito:

breakpoint	risoluzione
Extra small	<576px
Small	≥576px
Medium	≥768px
Large	≥992px
Extra large	≥1200px
Extra extra large	≥1400px

Combinando questi elementi si possono creare layout arbitrariamente complicati, ricordando un semplice principio: ogni riga in Bootstrap può contenere 12 unità.

Inserendo quindi due elementi caratterizzati dalla classe col-6 all’interno di un elemento row, si otterrà che i due elementi occuperanno tutto lo spazio disponibile nell’elemento row.

Ogni altro elemento inserito dentro row andrà quindi a capo.

Di seguito troverai un esempio di applicazione del grid system di Bootstrap.

Bootstrap Grid System: un esempio pratico

Ecco un esempio pratico di applicazione del grid system di Bootstrap.

Per comodità, riporto il codice utilizzato per produrre l’esempio:

     <div class="container">
      <div class="row">
        <div class="col-xs-12 col-sm-4">Col</div>
        <div class="col-xs-12 col-sm-4">Col</div>
        <div class="col-xs-12 col-sm-4">Col</div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-3">Col</div>
        <div class="col-xs-12 col-sm-6">Col</div>
        <div class="col-xs-12 col-sm-3">Col</div>
      </div>
      <div class="row">
        <div class="col-xs-12 col-sm-3">Col</div>
        <div class="col-xs-12 col-sm-3">Col</div>
        <div class="col-xs-12 col-sm-3">Col</div>
        <div class="col-xs-12 col-sm-3">Col</div>
      </div>
      <div class="row">
        <div class="col">Col</div>
        <div class="col">Col</div>
      </div>
    </div>

Ti invito a ridimensionare la pagina / avviare l’emulatore di smartphone per vedere in che modo si adatta l’esempio proposto.

Le helper classes di Bootstrap

Il framework mette a disposizione innumerevoli classi CSS già pronte per attribuire delle proprietà agli elementi HTML in maniera rapida ed efficace.

Per chiarire meglio cosa siano le helper classes, ecco un esempio classico.

Tra le classi a disposizione, vi è la classe .d-{breakpoint}-{value}, dove i breakpoints sono quelli esplicitati nei paragrafi precedenti (sm, md, lg, xl, xxl), mentre value è uno tra quelli disponibili:

none
inline
inline-block
block
grid
table
table-cell
table-row
flex
inline-flex

Il breakpoint indicherà l’intervallo di applicazione del value inserito.

E’ importante sapere che il breakpoint può essere omesso: in tal caso, l’intervallo di applicazione sarà esteso a tutte le risoluzioni.

Un esempio di applicazione di helper class

Applicando le classi d-none d-sm-block ad un elemento HTML, esso sarà caratterizzato dalla proprietà display: none per schermi con risoluzioni inferiori a 576px.

Per risoluzioni superiore tale elemento avrà la proprietà display: block.

Le helper classes disponibili in Bootstrap

Analogamente a quanto visto per la proprietà display, Bootstrap offre classi per modificare le seguenti proprietà CSS:

Background
Colors
Display
Flex
Float
Interactions
Overflow
Position
Shadows
Sizing
Text
Vertical align
Visibility

Puoi approfondire l’uso di ciascuno di esse sul sito di Boostrap.

Come installare Bootstrap

Puoi installare Bootstrap in diversi modi:

Tramite package manager
Utilizzando un Content Delivery Network (CDN)
Scaricando direttamente i files del framework dal sito ufficiale

Installare Bootstrap tramite npm

Per installare Bootstrap tramite npm è sufficiente utilizzare il seguente comando

npm install bootstrap@5.2.3

dove è possibile selezionare la versione desiderata variando i numeri dopo il simbolo @.

Usare Bootstrap tramite CDN

Esistono diversi CDN che consentono di includere i files di Bootstrap nel proprio sito.

<html>
<head>
...
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
...
<!-- JavaScript Bundle with Popper -->
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%405.2.3%2Fdist%2Fjs%2Fbootstrap.bundle.min.js%22%20integrity%3D%22sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL%2BjjXkk%2BQ2h455rYXK%2F7HAuoJl%2B0I4%22%20crossorigin%3D%22anonymous%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
</body>
</html>

Nell’esempio proposto puoi vedere come installare Bootstrap facendo uso del CDN jsDelivr.

Scaricare i files di Bootstrap

Nella documentazione di ogni versione di Bootstrap è disponibile il link per scaricare tutti i files del framework.

Nella versione 5.2 la sezione dedicata è questa.

A questo link sono anche disponibili le istruzioni dettagliate riguardo all’installazione di Bootstrap tramite file locali.

Approfondimenti – Bootstrap CSS

Questo blog ospita una sezione interamente dedicata al CSS.

Ecco alcuni contenuti:

Conclusioni – Bootstrap CSS

In questo articolo abbiamo approfondito i motivi della grande diffusione di Bootstrap, il framework più utilizzato nell’ambito del web development.

Seguimi su