Я хочу центрировать все содержимое моих карточек, но все это будет справа
код моей карты:
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<div class = "container mt-5 p-5">
<div class = "row g-4">
<div class = "col-12 col-md-6 col-lg-3">
<div class = "card align-items-center bg-light">
<img src = "img/oranvour.png" alt = "dfg juice" class = "card-img-top">
<div class = "card-body">
<h5 class = "card-title">Juice</h5>
<p class = "card-text">Price: $199.00</p>
<div class = "form-outline">
<label class = "form-label" for = "typeNumber">amount</label>
<input type = "number" id = "typeNumber" class = "form-control" />
</div>
</div>
</div>
</div>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>
</body>
</html>
Я ожидаю, что весь контент будет в центре карты, а не выровнен по правому краю.
Вам нужно установить класс text-center
на card
следующим образом:
<div class = "card text-center bg-light" style = "width: 18rem;">
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin = "anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<div class = "container mt-5 p-5">
<div class = "row g-4">
<div class = "col-12 col-md-6 col-lg-3">
<div class = "card text-center bg-light" style = "width: 18rem;">
<img src = "https://images.unsplash.com/photo-1669111957903-36e4da270ef1?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt = "" class = "card-img-top">
<div class = "card-body">
<h5 class = "card-title">Juice</h5>
<p class = "card-text">Price: $199.00</p>
<div class = "form-outline">
<label class = "form-label" for = "typeNumber">amount</label>
<input type = "number" id = "typeNumber" class = "form-control" />
</div>
</div>
</div>
</div>
</div>
</div>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity = "sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin = "anonymous"></script>
</body>
</html>
@JohnJohnson Добро пожаловать! Рад, что смог вам помочь :-) Думаю, вы можете использовать свойство padding, например, p-2... У Bootstrap отличные документы!
просто добавьте «mx-auto» в класс над картой следующим образом:
<div class = "container mt-5 p-5">
<div class = "row g-4">
<div class = "col-12 col-md-6 col-lg-3 mx-auto">
<div class = "card align-items-center bg-light">
<img src = "img/oranvour.png" alt = "dfg juice" class = "card-img-top">
<div class = "card-body">
<h5 class = "card-title">Juice</h5>
<p class = "card-text">Price: $199.00</p>
<div class = "form-outline">
<label class = "form-label" for = "typeNumber">amount</label>
<input type = "number" id = "typeNumber" class = "form-control" />
</div>
</div>
</div>
</div>
</div>
<div/>
спасибо, что сработало, как мне теперь добавить немного интервала между элементами на карточке?