I want some gaps between my cards horizontally. But when I am adding gx-5 bootstrap 5 class, it's not taking any gap horizontally. here is my code below.
<div className="container">
<div className="row gx-5">
{myProducts.map((product) => (
<div
key={product._id}
class="card col-sm-12 col-md-4 "
style={{ boxShadow: "rgba(0, 0, 0, 0.24) 0px 3px 8px" }}
>
<img class="card-img-top img-fluid" src={product.image} alt="" />
<div class="card-body">
<h5 class="card-title">{product.name}</h5>
<p class="card-text">{product.description}</p>
</div>
</div>
))}
</div>
</div>
Is anyone there to help me, please?
Try this card snippet out:
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="..." alt="..." />
<div class="card-body">
<h5 class="card-title">Product</h5>
<p class="card-text">Product</p>
</div>
</div>
</div>
Explanation:
I just nested a new card div inside the column because card class affects how Boostrap manages the gutters.
A working example:
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row gx-5">
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card">
<img class="card-img-top" src="https://media.istockphoto.com/photos/forest-wooden-table-background-summer-sunny-meadow-with-green-grass-picture-id1353553203?b=1&k=20&m=1353553203&s=170667a&w=0&h=QTyTGI9tWQluIlkmwW0s7Q4z7R_IT8egpzzHjW3cSas=" alt="" />
<div class="card-body">
<h5 class="card-title">Product 01</h5>
<p class="card-text">Product 01 description</p>
</div>
</div>
</div>
</div>
</div>
Note: I converted the code snippet into plain HTML please consider converting it back to its original state without changing the classes.
I'm facing an issue on this website fearofmissingoutfomo.com where there is a white bar on the right side when viewing in iPad.
my code is
html,body {
margin: 0;
padding: 0;
border: 0;
#include smooth_font();}
{% if settings.use_bg_image %}
body {
background: {{settings.shop_bg_color}} url({{ 'bg.png' | asset_url }}) 0 0 no-repeat;
}
body.index-template {
background: {{settings.shop_bg_color}} url({{ 'bg.png' | asset_url }}) 0 0 no-repeat;
padding-top: 40px;
padding-bottom: 40px;
}
Help will be really appreciated. I also see some related threads but can't relate that to my issue. Thanks.
The problem is happenning because of this section:
Currently you section has HTML like that
<div id="shopify-section-1509186783462" class="shopify-section index-section products-grid">
<section data-section-id="1509186783462" data-section-type="products">
<div class="section-header text-center">
<h2>View our featured christmas items</h2>
</div>
<div class="grid grid--uniform grid--view-items">
......
</div>
<div class="text-center view-more btn">
<a href="/collections/christmas">
See more
</a>
</div>
</section>
</div>
You should fix it and add container and row like that:
<div id="shopify-section-1509186783462" class="shopify-section index-section products-grid">
<section data-section-id="1509186783462" data-section-type="products">
<div class="container">
<div class="row">
<div class="section-header text-center">
<h2>View our featured christmas items</h2>
</div>
<div class="grid grid--uniform grid--view-items">
......
</div>
<div class="text-center view-more btn">
<a href="/collections/christmas">
See more
</a>
</div>
</div>
</div>
</section>
</div>
I have a question similar to this one Flexbox - two fixed width columns, one flexible
But that one is about doing it using just Flexbox. I'm trying to use AngularJS Material. I want my left and right divs to be a fixed 28px width, and the center div to flex.
Something like this:
<div layout="row" layout-margin>
<!-- Alphabet - First Half -->
<div flex="28px">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">A</div>
</md-button>
</md-list-item>
</md-list>
</div>
<div flex>
<md-content></md-content>
</div>
<!-- Alphabet - Second Half -->
<div flex="28px">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">N</div>
</md-button>
</md-list-item>
</md-list>
</div>
</div>
The flex attribute value is restricted to 33, 66, and multiples of five.
For example: flex="5", flex="20", "flex="33", flex="50", flex="66", flex="75", ....
Try this
<div layout="row" layout-margin>
<div flex="25">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">A</div>
</md-button>
</md-list-item>
</md-list>
</div>
<div flex>
<md-content></md-content>
</div>
<div flex="25">
<md-list>
<md-list-item>
<md-button class="md-fab md-mini">
<div align="center">N</div>
</md-button>
</md-list-item>
</md-list>
</div>
</div>
In JQuery Mobile you can easily group buttons horizontally by:
<div data-role="controlgroup" data-type="horizontal">
1
2
3
</div>
and vertically by
<div data-role="controlgroup" data-type="vertical">
1
2
3
</div>
but how can I make them group both horizontally and vertically?
Thank you!
Use a jQuery Mobile GRID.
<div class="ui-grid-b" >
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
<div class="ui-block-a">1</div>
<div class="ui-block-b">2</div>
<div class="ui-block-c">3</div>
</div>
Then if you want to get rid of the space between the buttons, add CSS to eliminate the margins:
.ui-block-a .ui-btn, .ui-block-b .ui-btn, .ui-block-c .ui-btn {
margin: 0 !important;
}
Here is a DEMO
I want to write 4 columns in a row like this
<div class="row">
<div class="span3">Something</div>
<div class="span3">Something</div>
<div class="span3">Something</div>
<div class="span3">Something</div>
</div>
<div class="row">
<div class="span3">Something</div>
<div class="span3">Something</div>
<div class="span3">Something</div>
<div class="span3">Something</div>
</div>
data sizes are dynamic, so it can be 4, 8 or more.
this is archived in other template engine
{{#each list}}
{{#if #index % 4 == 0}}
<div class="row">
{{/if}}
<div class="span3">{{this.name}}</div>
{{#if #index % 4 == 0}}
</div>
{{/if}}
{{/each}}
but how can I archive this in thymeleaf?
I can't find the way because th:each is in tag(<div class="row"> or <div class="span3">) as attribute.
Model code
List<String> data = new ArrayList<String>();
data.add("1");
data.add("2");
data.add("3");
data.add("4");
data.add("5");
data.add("6");
data.add("7");
data.add("8");
model.addAttribute("datas", data);
Thymeleaf view code
<div th:each="data, row: ${datas}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${row.current} % 4 == 0" class="span3">
<span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:text="${datas[dataIndex]}">data</span>
</div>
Result
<div class="span3">
<span>1</span><span>2</span><span>3</span><span>4</span>
</div>
<div class="span3">
<span>5</span><span>6</span><span>7</span><span>8</span>
</div>
I used an array to solve this problem.
I think you will find a better way.
This can be done using numbers.sequence too. Set colCount to whatever number of columns you'd like:
<th:block th:with="colCount=${4}">
<div th:each="r : ${#numbers.sequence(0, datas.size(), colCount)}" class="row">
<div th:each="c : ${#numbers.sequence(0, colCount - 1)}" th:if="${r + c < datas.size()}" th:text="${datas.get(r + c)}" class="span3"></div>
</div>
</th:block>
I just created an account here to correct the accepted answer. The accepted answer works great so long as the "datas" being passed in is an array of consecutive integers. However, to make it work with any kind of data structure, "row.current" needs to change to "row.count", as follows:
<div th:each="data, row: ${datas}" th:with="numList=${#strings.listSplit('3,2,1,0', ',')}" th:if="${row.count} % 4 == 0" class="span3">
<span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:text="${datas[dataIndex]}">data</span>
</div>
If you use row.current, then it uses the actual item in the list, which is great in the example shown, but not so great for any other kind of data structure. Hope this helps.
EDIT:
I have to further refine this because the accepted answer also does not work if the number of items in the list is not evenly divisible by 4. Here is a better (though probably not perfect) solution:
<div th:each="data, row: ${datas}" th:with="numList=${ {3,2,1,0} }" th:if="${row.count % 4 == 0 or row.last}" class="span3">
<!-- Show all rows except the leftovers -->
<span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:if="${row.count % 4 == 0}" th:text="${datas[dataIndex]}">data</span>
<!-- Show the remainders (eg, if there are 9 items, the last row will have one item in it) -->
<span th:each="num : ${numList}" th:with="dataIndex=(${row.index} - ${num})" th:if="${row.last} and ${row.count % 4 != 0} and ${num < row.count % 4}" th:text="${datas[dataIndex]}">data</span>
</div>
This may be able to be refactored to eliminate one of the spans, but I have to move on now.
th:each can be used on any element basically. So something like this:
<div class="row" th:each="row : ${rows}">
<div class="span3" th:each="name : ${row.names}" th:text="${name}">Something</div>
</div>
<div class="row" th:each="museum,step : ${museums}">
<span th:if="${step.index % 2 == 0}">
<div class="column" style="background-color:#aaa;" >
<h2 th:text="'Name: ' + ${museum.name}"></h2>
<p th:text="'Address: ' + ${museum.address}"></p>
<p th:text="'Capacity: ' + ${museum.capacity}"></p>
</div>
</span>
<span th:if="${step.index < 3 and step.index %2 == 0} ">
<div class="column" style="background-color:#bbb;">
<h2 th:text="'Name: ' + ${museums[step.index+1].name}"></h2>
<p th:text="'Address: ' + ${museums[step.index+1].address}"></p>
<p th:text="'Capacity: ' + ${museums[step.index+1].capacity}"></p>
</div>
</span>
</div>
This is how I would approach the problem. Using a simple odd or even trick
I had the same problem and I saw the accepted answer but it was not easy enough for me so I tried a new solution and it does the job with much less code and much easier to understand
this is what I came up with:
// rowNum your situation, but be aware that you have to change all its instances to
<div th:each="i: ${#numbers.sequence(1, rowNum)}" class="row">
<div th:each="j: ${#numbers.sequence(((i-1) * rowNum), ((i-1) * rowNum) + (rowNum - 1)) }"
th:if="${j < #lists.size(list)}"
class="col col-md-5">
<span th:text=${list.get(j)}>item</span>
</div>
</div>
These are all so complicated when the answer is so simple as answered here.
<div colCount=${4} class="row">
<div class="span3" th:each="data : ${data}">...</div>
</div>
It limits the for each to 4 element blocks. I'm guessing that's a relatively new feature. Pretty cool.