Красивые панели для выделения информации

Панель с большой тенью

Некоторый важный текст

Панель с малой тенью

p-3 my-3 text-muted shadow-sm border-left-primary

Панель с иконкой

p-3 my-3 text-muted shadow-sm border-left-primary

Панели с разным цветом левой границы

p-3 my-3 text-muted shadow-sm border-left-info

p-3 my-3 text-muted shadow-sm border-left-success

p-3 my-3 text-muted shadow-sm border-left-danger

p-3 my-3 text-muted shadow-sm border-left-secondary

Панели с явной границей

p-3 my-3 text-muted shadow-sm border-left-warning border

Как реализовать:

<h3>Панель с большой тенью</h3>
<div class="p-3 my-3 text-muted shadow-lg border-left-primary ">
  Некоторый важный текст
</div>

<h3>Панель с малой тенью</h3>
<div class="p-3 my-3 text-muted shadow-sm border-left-primary ">
  Некоторый важный текст
</div>

<h3>Панель с иконкой </h3>
<div class="p-3 my-3 text-muted shadow-sm border-left-primary ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>

<h3>Панели с разным цветом левой границы </h3>
<div class="p-3 my-3 text-muted shadow-sm border-left-info ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>
<div class="p-3 my-3 text-muted shadow-sm border-left-success ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>
<div class="p-3 my-3 text-muted shadow-sm border-left-danger ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>
<div class="p-3 my-3 text-muted shadow-sm border-left-secondary ">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>
<h3>Панели с явной границей </h3>
<div class="p-3 my-3 text-muted shadow-sm border-left-warning border">
  <i class="fa fa-bars mr-2"></i>Некоторый важный текст
</div>

Другие модули

Поздравление клиента с днем рождения. Как увеличить касания с клиентами

Комментарии с флажками

Оконный интерфейс пользователя в личном кабинете на сайте - терминалы

Управление статусом заявки на сайте

Отправка действий в браузер пользователю (пуш, алерт и т.д.)

Добавление звука на сайт при действиях пользователя. Как сделать звук на сайте

Копирование текста в буфер обмена

Горизонтальный скроллинг на телефоне - прокрутка панелей вправо на мобильном экране

Последние обновления

Форма с дополняющим действием после выполнения операции

Форма 13.08.2024

Смотр таблицы в мобильном с горизонтальным скроллингом

Таблица 03.06.2024

Работа actions (JSON для выполнения действий в браузере)

30.09.2023

Объединение ячеек таблицы в 1 строку

Таблица 23.09.2023

Тепловая карта treemap (heatmap)

15.09.2023

Пробы разных диаграмм

02.08.2023

Вывод таблицы и графика в одном компоненте

Визуализация 02.08.2023

Пример вывода интерактивного графика

Визуализация 01.08.2023

Таблица, стилизованная под список

Таблица 18.03.2023

Создание калькулятора на сайте с детализацией счета

Форма 19.12.2022

Таблица - множество редактируемых полей в одной ячейке

Таблица 06.12.2022

Заполнение формы с режимом Черновик

Форма 01.12.2022

Как сделать простую капчу без внешних сервисов

Форма 21.11.2022

Подтверждение действия пользователя по коду через email, смс

Форма 17.11.2022

Обновленный редактор текста

Форма 10.11.2022

Таблица. Обновление полей при редактировании данных

Таблица 16.09.2022

Занесение данных для документа с предпросмотром

Разное 14.09.2022

Стилизация шапки таблицы

Таблица 09.09.2022

Альтернатива rich editor (tinyMCE) - редактор по блокам

Форма 31.07.2022

Лендинги, адаптированные под редактирование по секциям

Страницы 31.07.2022

SQL-инструмент для создания личных кабинетов на сайте

Суть подхода и история создания Falcon Space

Бесплатный курс по Falcon Space

Платформа Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки

Это быстрое внесение изменений

по ходу эксплуатации программы

Это современный интерфейс

полная адаптация под мобильные устройства