I would like to do the following markup for my page:
Nav is already done, but I can't get the grids. Yes on the left is an array of photos, I get them from the outside. And on the top right, I want to have a total cost and a buy button. I only need to adjust the grid, the rest is done. Here is my html code now.
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
...
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
....
</nav>
<div class="container">
<div class="col-8" th:each="product : ${session.bucket}">
<div class="card mt-2" style="width: 17rem; height: 35rem">
<div class="view overlay">
<img class="card-img-top" th:src="*{product.productDto.url}">
</div>
<div class="card-body text-center">
<p class="card-text"><span th:text="${product.productDto.brandName}"></span></p>
<p class="card-text"><span th:text="*{product.productDto.model}"></span></p>
<p class="card-text"><span th:text="*{product.productDto.price}"></span>$</p>
</div>
</div>
</div>
<div class="col-4 text-center">
<h3>Total cost</h3>
<span>100</span>
</div>
</div>
</div>
</body>
</html>
With this code, I get that first there are photos, and below them is my entry and a button (it is not in the code)
Yes, I am using simple bootstrap. No other styles, I have not used
im use this code
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row" th:each="product : ${session.bucket}">
<div class="col-md-12">
<div class="card mt-2" style="width: 17rem; height: 35rem">
<div class="view overlay">
<img class="card-img-top" th:src="*{product.productDto.url}">
</div>
<div class="card-body text-center">
<p class="card-text"><span th:text="${product.productDto.brandName}"></span></p>
<p class="card-text"><span th:text="*{product.productDto.model}"></span></p>
<p class="card-text"><span th:text="*{product.productDto.price}"></span>$</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 text-center">
<div class="text-center">
<h3>Total cost</h3>
<span>100</span>
</div>
</div>
</div>
</div>
question from:
https://stackoverflow.com/questions/65847938/how-to-make-the-required-grid-with-bootstrap 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
