diff --git a/docs/source/docs/container.blade.md b/docs/source/docs/container.blade.md index 593689e47..72a8c1ab5 100644 --- a/docs/source/docs/container.blade.md +++ b/docs/source/docs/container.blade.md @@ -9,11 +9,65 @@ title: "Container" A component for fixing an element's width to the current breakpoint. -@include('_partials.feature-badges', [ - 'responsive' => true, - 'customizable' => true, - 'hover' => false, - 'focus' => false -]) - @include('_partials.work-in-progress') + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ClassBreakpointProperties
.containerNonewidth: 100%;
sm (576px)max-width: 576px;
md (768px)max-width: 768px;
lg (992px)max-width: 992px;
xl (1200px)max-width: 1200px;
+
+ +Tailwind's `.container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint. + +Note that unlike containers you might have used in other frameworks, **Tailwind's container does not center itself automatically and does not contain any built-in horizontal padding.** + +To center a container, use the `.mx-auto` utility: + +```html +
+ +
+``` + +To add horizontal padding, use the `.px-{size}` utilities: + +```html +
+ +
+``` +