Размер карт Bootstrap 5 с использованием пользовательского CSS
Карточный компонент Bootstrap 5 предоставляет гибкий и расширяемый контейнер содержимого с несколькими вариантами и параметрами. Он включает в себя параметры для верхних и нижних колонтитулов. Карточки поддерживают широкий спектр содержимого, включая изображения, текст, группы списков, ссылки и многое другое.
Карточки с пользовательским CSS используются для установки пользовательских стилей CSS во внешних таблицах стилей или в качестве встроенных стилей для установки ширины карточки.
Синтаксис:
<div class="card" style="..."> <div class="card-body"> Content </div> </div>
Пример 1: В этом примере мы установим ширину карты с помощью встроенного CSS.
Выход:
Пример 2: В этом примере мы установим ширину карты с помощью внешней таблицы стилей.
Имя файла: style.css
CSS
#GFG { width : 18 rem; } |
HTML-файл: мы импортируем style.css в этот HTML-файл.
HTML
<!DOCTYPE html> < html > < head > < title > Bootstrap 5 Cards Sizing using custom CSS </ title > rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < link href = "./style.css" rel = "stylesheet" > </ head > < body > < div class = "container" > < h1 class = "text-success" > GeeksforGeeks </ h1 > < h3 >Cards Using custom CSS</ h3 > < div class = "card" id = "GFG" > < img src = class = "card-img-top" > < div class = "card-body" > < h5 class = "card-title" >Java</ h5 > < p class = "card-text" > Java is Object Oriented. However, it is not considered as pure object-oriented as it provides support for primitive data types (like int, char, etc) </ p > </ div > </ div > </ div > </ body > </ html > |
Выход:
Ссылка: https://getbootstrap.com/docs/5.0/components/card/#using-custom-css