Как использовать классы Bootstrap для изменения внешнего вида текста и изображений?

@willis.streich 

Bootstrap предоставляет множество классов для изменения внешнего вида текста и изображений. Ниже приведены примеры некоторых из них:

1. Классы для изменения цвета текста:

• .text-primary: устанавливает цвет текста в первичный цвет Bootstrap
• .text-secondary: устанавливает цвет текста во вторичный цвет Bootstrap
• .text-success: устанавливает цвет текста в цвет успеха
• .text-danger: устанавливает цвет текста в цвет опасности
• .text-warning: устанавливает цвет текста в цвет предупреждения
• .text-info: устанавливает цвет текста в цвет информации
• .text-light: устанавливает цвет текста в светлый цвет (используется на темном фоне)
• .text-dark: устанавливает цвет текста в темный цвет (используется на светлом фоне)

1. Классы для изменения размера текста:

• .h1: устанавливает размер текста на 2.5rem
• .h2: устанавливает размер текста на 2rem
• .h3: устанавливает размер текста на 1.75rem
• .h4: устанавливает размер текста на 1.5rem
• .h5: устанавливает размер текста на 1.25rem
• .h6: устанавливает размер текста на 1rem

1. Классы для изменения выравнивания текста:

• .text-left: устанавливает выравнивание текста по левому краю
• .text-center: устанавливает выравнивание текста по центру
• .text-right: устанавливает выравнивание текста по правому краю
• .text-justify: устанавливает выравнивание текста по ширине блока

1. Классы для изменения размера изображений:

• .img-fluid: устанавливает максимальную ширину изображения на 100% и высоту на автоматический режим, что позволяет изображению масштабироваться пропорционально
• .img-thumbnail: добавляет рамку и скругляет углы изображения

Примеры использования этих классов выглядят так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<!-- Пример изменения цвета текста -->
<p class="text-primary">Это текст первичного цвета Bootstrap</p>
<p class="text-danger">Это текст цвета опасности</p>

<!-- Пример изменения размера текста -->
<h1 class="h1">Заголовок первого уровня</h1>
<h2 class="h2">Заголовок второго уровня</h2>

<!-- Пример изменения выравнивания текста -->
<p class="

@willis.streich 

text-center">Этот текст выровнен по центру

Эти примеры позволят вам использовать классы Bootstrap для быстрого и удобного изменения внешнего вида текста и изображений на вашем сайте.