Typography

Twitter bootstrap Documentation

Lead

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->lead('This is a lead paragraph. It stands out from regular paragraphs.');

Abbreviations

Twitter bootstrap Documentation

Result

Source

<?php

// First abbreviation
echo '<p>' . $this->abbreviation('attr', 'attribute') . '</p>';

echo PHP_EOL;

// Second abbreviation
echo '<p>' . $this->abbreviation('HTML', 'HyperText Markup Language', true) . '</p>';

Blockquotes

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->blockquote(
    'A well-known quote, contained in a blockquote element.'
);

Naming a source

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->blockquote(
    // Content
    'A well-known quote, contained in a blockquote element.',
    // Footer content
    'Someone famous in <cite title="Source Title">Source Title</cite>'
);

Alignment

Twitter bootstrap Documentation

Result

Source

<?php

// Center
echo $this->blockquote(
    // Content
    'A well-known quote, contained in a blockquote element.',
    // Footer content
    'Someone famous in <cite title="Source Title">Source Title</cite>',
    [],
    [],
    [],
    // Class for figure wrapper
    ["class" => "text-center"],
);

echo PHP_EOL;

// Right
echo $this->blockquote(
    // Content
    'A well-known quote, contained in a blockquote element.',
    // Footer content
    'Someone famous in <cite title="Source Title">Source Title</cite>',
    [],
    [],
    [],
    // Class for figure wrapper
    ['class' => 'text-end'],
);

List

Twitter bootstrap Documentation

Unstyled

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->htmlList(
    // List items
    [
        'This is a list.',
        'It appears completely unstyled.',
        'Structurally, it\'s still a list.',
        'However, this style only applies to immediate child elements.',
        'Nested lists:' => [
            'are unaffected by this style',
            'will still show a bullet',
            'and have appropriate left margin',
        ],
        'This may still come in handy in some situations.',
    ],
    // Set "unstyled" flag
    ['unstyled' => true],
);

Inline

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->htmlList(
    // List items
    ['This is a list item.', 'And another one.', 'But they\'re displayed inline.'],
    // Set "inline" flag
    ['inline' => true],
);

Description list alignment

Twitter bootstrap Documentation

Result

Source

<?php

echo $this->descriptionList(
    [
        'Description lists' => 'A description list is perfect for defining terms.',
        'Term' => '<p>Definition for the term.</p>' .
        '<p>And some more placeholder definition text.</p>',
        'Another term' => 'This definition is short, so no extra paragraphs or anything.',
        'Truncated term is truncated' => [
            'term' => [
                'class' => 'text-truncate',
            ],
            'detail' => 'This can be useful when space is tight. Adds an ellipsis at the end.',
        ],
        'Nesting' => [
            'detail' => [
                'data' => [
                    'Nested definition list' => [
                        'term' => [
                            'column' => 'sm-4',
                        ],
                        'detail' => [
                            'data' => 'I heard you like definition lists. ' .
                            'Let me put a definition list inside your definition list.',
                            'column' => 'sm-8',
                        ],
                    ],
                ],
            ],
        ],
    ],
);