Un container és un element HTML que s’utilitza per agrupar i estructurar contingut dins d’un disseny web. Proporciona un espai delimitat amb amplada fixa o fluida, i s’utilitza sovint per centrar o organitzar elements.

1. HTML Bàsic

Un contenidor simple es crea amb un <div> per encapsular contingut:

<div style="width: 80%; margin: 0 auto;">
    Contingut centrat
</div>

• Explicació: L’amplada és del 80% del viewport, i margin: 0 auto el centra horitzontalment.

2. Bootstrap

Bootstrap ofereix classes predefinides per contenidors:

<div class="container">
    Contingut centrat i amb amplada fixa
</div>

• Classes:
  • container: Amplada fixa per mida de pantalla (respon).
  • container-fluid: Amplada 100% sempre.

3. Tailwind CSS

En Tailwind, utilitzes la classe container i opcions personalitzables:

<div class="container mx-auto">
    Contingut centrat
</div>

• Classes:
  • container: Aplica amplades predeterminades segons el viewport.
  • mx-auto: Centra horitzontalment el contenidor.

4. UIkit

UIkit ofereix una classe específica per contenidors:

<div class="uk-container">
    Contingut centrat i responsive
</div>

• Classes:
  • uk-container: Amplada fixa i centrada segons la mida de la pantalla.
  • uk-container-expand: Amplada 100%.

Resum Comparatiu

FrameworkClasseAmpleCentrada AutomàticaHTML bàsic | style="margin: 0 auto;" | Manual | Sí
Bootstrap | container o container-fluid | Respon o 100% | Sí
Tailwind CSS | container mx-auto | Respon segons config. | Sí
UIkit | uk-container | Respon o 100% | Sí
Amb això, pots escollir segons el teu projecte!