Containers and Page Structure

Containers

Use the container class to create a responsive container.
By default, it's centered and has padding on small screens.
Combine with mx-auto for centering when not full-width.

Example:

<div class="container mx-auto px-4">Centered content</div>

Page Structure

Use flexbox (flex) or grid (grid) for layout structure.
Combine with responsive prefixes for different layouts on different screen sizes.

Example:

<div class="flex flex-col md:flex-row">
  <nav class="w-full md:w-1/4">Navigation</nav>
  <main class="w-full md:w-3/4">Main content</main>
</div>

Floats and Clears

Floats

Float elements using float-right, float-left, or float-none.

Example:

<img class="float-left mr-4" src="image.jpg" alt="Floated image">

Clears

It relates to the CSS clear property, which is used to control the behavior of floated elements. The clear property specifies whether an element can be positioned next to floated elements or must be moved down (cleared) to avoid them.

clear Properties:

  • clear-none: The default value. Elements can float beside floated elements.
  • clear-left: The element will be moved down until it is below any floating elements on the left side.
  • clear-right: The element will be moved down until it is below any floating elements on the right side.
  • clear-both: The element will be moved down until it is below any floating elements on both sides.

Example:

<div class="clear-both">Cleared content</div>