Размер карт Bootstrap 5 с использованием пользовательского CSS

Опубликовано: 17 Февраля, 2023

Карточный компонент Bootstrap 5 предоставляет гибкий и расширяемый контейнер содержимого с несколькими вариантами и параметрами. Он включает в себя параметры для верхних и нижних колонтитулов. Карточки поддерживают широкий спектр содержимого, включая изображения, текст, группы списков, ссылки и многое другое.

Карточки с пользовательским CSS используются для установки пользовательских стилей CSS во внешних таблицах стилей или в качестве встроенных стилей для установки ширины карточки.

Синтаксис:

<div class="card" style="...">
     <div class="card-body">
           Content
     </div>
</div>

Пример 1: В этом примере мы установим ширину карты с помощью встроенного CSS.

Выход:

Пример 2: В этом примере мы установим ширину карты с помощью внешней таблицы стилей.

Имя файла: style.css

CSS

#GFG {
    width: 18rem;
}

HTML-файл: мы импортируем style.css в этот HTML-файл.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Bootstrap 5 Cards Sizing using custom CSS
    </title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Java.png"
                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

Technical Scripter Picked Bootstrap

Размер карт Bootstrap 5 с использованием пользовательского CSS

CSS

HTML

РЕКОМЕНДУЕМЫЕ СТАТЬИ