*/ private array $macros = []; public function __construct(Environment $env) { parent::__construct($env); $this->source = $this->getSourceContext(); $this->parent = false; $this->blocks = [ ]; } protected function doDisplay(array $context, array $blocks = []): iterable { $macros = $this->macros; $__internal_5a27a8ba21ca79b61932376b2fa922d2 = $this->extensions["Symfony\\Bundle\\WebProfilerBundle\\Twig\\WebProfilerExtension"]; $__internal_5a27a8ba21ca79b61932376b2fa922d2->enter($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "theme/ui-grid.html.twig")); $__internal_6f47bbe9983af81f1e7450e9a3e3768f = $this->extensions["Symfony\\Bridge\\Twig\\Extension\\ProfilerExtension"]; $__internal_6f47bbe9983af81f1e7450e9a3e3768f->enter($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof = new \Twig\Profiler\Profile($this->getTemplateName(), "template", "theme/ui-grid.html.twig")); // line 1 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/main.html.twig"); yield " "; // line 5 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/title-meta.html.twig", ["title" => "Grid"]); yield " "; // line 7 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/head-css.html.twig"); yield "
"; // line 16 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/menu.html.twig"); yield "
"; // line 26 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/page-title.html.twig", ["pagetitle" => "Base UI", "title" => "Grid"]); yield "

Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

xs
<576px 		sm
≥576px 		md
≥768px 		lg
≥992px 		xl
≥1200px 		xxl
≥1400px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px 1320px
Class prefix col- col-sm- col-md- col-lg- col-xl- col-xxl-
# of columns 12
Gutter width 1.5rem (0.75rem on each side of a column)
Custom gutters Yes
Nestable Yes
Offsets Yes
Column ordering Yes

Vertical alignment (align-items-start)

Use align-items-start class to vertically align-items at the start.

col-sm-4
col-sm-4
col-sm-4 
<!-- Vertical alignment (align-items-start) -->
<div class="row align-items-start">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Vertical alignment (align-items-center)

Use align-items-center class to vertically align-items at the center.

col-sm-4
col-sm-4
col-sm-4 
<!-- Vertical alignment (align-items-center) -->
<div class="row align-items-center">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Vertical alignment (align-items-end)

Use align-items-end class to vertically align-items at the end.

col-sm-4
col-sm-4
col-sm-4 
<!-- Vertical alignment (align-items-end) -->
<div class="row align-items-end">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Align Self

Use the align-self-start,align-self-center, or align-self-end class respectively to vertically align items with a different position.

align-self-start
align-self-center
align-self-end 
<!-- Align Self -->
<div class="row">
    <div class="col-sm-4 align-self-start">
        ...
    </div>
    <div class="col-sm-4 align-self-center">
        ...
    </div>
    <div class="col-sm-4 align-self-end">
        ...
    </div>
</div>

Horizontal Alignment

Use the justify-content-start,justify-content-center, or justify-content-end class respectively to horizontally align items with a different position.

justify-content-start
justify-content-center
justify-content-end 
<!-- Horizontal Alignment -->
<div class="row justify-content-start">
    <div class="col-sm-4">
        ...
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-sm-4">
        ...
    </div>
</div>
<div class="row justify-content-end">
    <div class="col-sm-4">
        ...
    </div>
</div>
"; // line 428 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/footer.html.twig"); yield "
"; // line 435 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/customizer.html.twig"); yield " "; // line 437 yield Twig\Extension\CoreExtension::include($this->env, $context, "theme/partials/vendor-scripts.html.twig"); yield " "; $__internal_5a27a8ba21ca79b61932376b2fa922d2->leave($__internal_5a27a8ba21ca79b61932376b2fa922d2_prof); $__internal_6f47bbe9983af81f1e7450e9a3e3768f->leave($__internal_6f47bbe9983af81f1e7450e9a3e3768f_prof); yield from []; } /** * @codeCoverageIgnore */ public function getTemplateName(): string { return "theme/ui-grid.html.twig"; } /** * @codeCoverageIgnore */ public function isTraitable(): bool { return false; } /** * @codeCoverageIgnore */ public function getDebugInfo(): array { return array ( 505 => 437, 500 => 435, 490 => 428, 85 => 26, 72 => 16, 60 => 7, 55 => 5, 48 => 1,); } public function getSourceContext(): Source { return new Source("{{ include('theme/partials/main.html.twig') }} {{ include('theme/partials/title-meta.html.twig', {title: 'Grid'}) }} {{ include('theme/partials/head-css.html.twig') }}
{{ include('theme/partials/menu.html.twig') }}
{{ include('theme/partials/page-title.html.twig', {pagetitle: 'Base UI', title: 'Grid'}) }}

Grid Options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

xs
<576px 		sm
≥576px 		md
≥768px 		lg
≥992px 		xl
≥1200px 		xxl
≥1400px
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Max container width None (auto) 540px 720px 960px 1140px 1320px
Class prefix col- col-sm- col-md- col-lg- col-xl- col-xxl-
# of columns 12
Gutter width 1.5rem (0.75rem on each side of a column)
Custom gutters Yes
Nestable Yes
Offsets Yes
Column ordering Yes

Vertical alignment (align-items-start)

Use align-items-start class to vertically align-items at the start.

col-sm-4
col-sm-4
col-sm-4 
<!-- Vertical alignment (align-items-start) -->
<div class="row align-items-start">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Vertical alignment (align-items-center)

Use align-items-center class to vertically align-items at the center.

col-sm-4
col-sm-4
col-sm-4 
<!-- Vertical alignment (align-items-center) -->
<div class="row align-items-center">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Vertical alignment (align-items-end)

Use align-items-end class to vertically align-items at the end.

col-sm-4
col-sm-4
col-sm-4 
<!-- Vertical alignment (align-items-end) -->
<div class="row align-items-end">
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
    <div class="col-sm-4">
        ...
    </div>
</div>

Align Self

Use the align-self-start,align-self-center, or align-self-end class respectively to vertically align items with a different position.

align-self-start
align-self-center
align-self-end 
<!-- Align Self -->
<div class="row">
    <div class="col-sm-4 align-self-start">
        ...
    </div>
    <div class="col-sm-4 align-self-center">
        ...
    </div>
    <div class="col-sm-4 align-self-end">
        ...
    </div>
</div>

Horizontal Alignment

Use the justify-content-start,justify-content-center, or justify-content-end class respectively to horizontally align items with a different position.

justify-content-start
justify-content-center
justify-content-end 
<!-- Horizontal Alignment -->
<div class="row justify-content-start">
    <div class="col-sm-4">
        ...
    </div>
</div>
<div class="row justify-content-center">
    <div class="col-sm-4">
        ...
    </div>
</div>
<div class="row justify-content-end">
    <div class="col-sm-4">
        ...
    </div>
</div>
{{ include('theme/partials/footer.html.twig') }}
{{ include('theme/partials/customizer.html.twig') }} {{ include('theme/partials/vendor-scripts.html.twig') }} ", "theme/ui-grid.html.twig", "/var/www/cds-intranet/app/templates/theme/ui-grid.html.twig"); } }