I have a 2 column grid on a row with 2 cards. I would also like a margin so the cards are not touching each other, but when I add w3-margin to my cards, they wrap onto different lines.
How can I have the margin around the cards without it affecting the column integrity? Thanks.
Fiddle (remove instances of w3-margin to see it working): https://jsfiddle.net/n2fole00/7o6bnosu/
<div class="w3-row-padding">
<div class="w3-col s6 m6 l6 w3-card-2 w3-yellow w3-margin">
<p>Cards should be on the same row with some space between them.</p>
</div>
<div class="w3-col s6 m6 l6 w3-card-2 w3-green w3-margin">
<p>Cards should be on the same row with some space between them.</p>
</div>
</div>
I figured it out. I was just trying to do too much in one div. If anyone is interested, here is the my solution.
<div class="w3-col m6">
<div class="w3-card-2 w3-margin w3-light-grey w3-center" style="">
...content...
</div>
</div>
Related
I am trying to create the following layout in Bootstrap 5 for three different breakpoints.
Playing with offsets and orders didn't bring a solution, for example:
<div class="col-xs-12 col-md-6">Text A</div>
<div class="col-xs-12 col-md-6"><img src="Img.jpg" class="img-fluid"></div>
<div class="col-xs-12">Text B</div>
works for XS and MD, but not for LG. Img is 1200x800, but I could resize it.
Using Bootstrap 5 it seems that use of gutter classes does not put any vertical space between row elements, it only puts space if a single row element has more than 12 columns and wraps round on display.
I tend to use a row when the content is going to be a single row on the main platform I am developing for (iPad), so I'm using mb-2 to put a margin between each row. But sometimes the content is too large for smaller devices such as phones and so it wraps and then I get no space between first half of the row and the second half of the row that is now rendered between it, so I have added gy-2 as well
So am I right in thinking that in most cases you need to add and mb (margin bottom) class and a gy (gutter vertical) class to most rows, or have I misunderstood this?
<div class="row gy-2 mb-2">
<div class="col">
<span class="ps-2">
<label>
All tracks composed by
</label>
<span>
<a href="/composer.start?cid=0$=Composer$2682&title=Composers+%2F+Johann+Sebastian+Bach" class="small figure-caption">
Johann Sebastian Bach
</a>
<label class="small figure-caption">
</label>
</span>
</span>
</div>
</div>
<div class="row gy-2 mb-2">
<div class="col-12 col-sm-auto">
<span>
<button id="show_movements_button" type="btn" class="btn btn-outline-primary" data-bs-toggle="collapse" data-bs-target="#movements_id">
Show Movements
</button>
</span>
<span>
<button id="show_credits_button" type="btn" class="btn btn-outline-secondary" data-bs-toggle="collapse" data-bs-target="#credits_id">
Show All Credits
</button>
</span>
</div>
<div class="col-12 col-sm-auto ms-sm-auto">
<span>
<span class="input-group">
<span for="filter" id="filterlabel" class="input-group-text">
Filter
</span>
<input type="text" id="filter" name="filter" onkeyup="filterOnly()" class="form-control">
</span>
</span>
</div>
</div>
You got it right, you need to use mb to add vertical space between each row and gy to add vertical space between the columns of each row (when the row wraps).
You can also add mb to the columns to achieve the same result:
JSFiddle
I would do something like that. Some top-of-the-head options...
Use bottom margin, as mb-2
Use Y-axis margin, as my-2
Use a custom class on a container element, as row-gutter-2 {margin-bottom: $spacer * .5;}
The cards rendered in each are not aligned correctly, because instead of aligning horizontally they are aligned vertically (which I don't want).
It is very strange that this happens because I have made many similar rowr classes that contain exactly the same cards (But with different content) and these "align" perfectly well. In fact, this had never happened to me with the rows I have made before until I made this one, and as much as I check the code over and over again it is exactly the same as the ones I have made previously except for the content which is the only thing different.
<row>
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</row>
And to clarify, this row class is not inside another row class, it is only inside a container p-4" class as I use to put all the rows-columns of cards I make in row classes and they do work.
Here. You have used row element instead of row as class. You need to use <div class="row">...</div> instead of <row>...</row>. Please read bootstrap Grid system for more understand.
Your code should be as below:
<div class="row">
{{#each schdData.logs}}
<div class="col-md-3">
<div class="card">
<div class="card-body">
<p class="card-text">{{{objst this}}}</p>
</div>
</div>
</div>
{{/each}}
</div>
My problem is with using thymeleaf iteration and if-else condition together.
Suppose i have 100 products in my mysql database i want to show them on a webpage using cards and there are only 4 cards in a row(I am able to print them in a row), but i want to change the row after every 4 iteration(0-3),so that new four cards will be shown in next row.
My thymeleaf Template Page:-
<div class="container" >
<div class="row">
<div class="col-xl-3" th:each="products : ${ListOfProducts}">
<div class="card" style="width: 15rem;">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<p class="card-title" th:text = "${products.productName}"></p>
<hr>
<p class="card-text" th:text = "${products.productCost}"></p>
AddToCard
</div>
</div>
</div>
</div>
I know we can do it using loops and if-condition but i am new to thymeleaf syntax, so please help me to get out of this rid.
Thanks in advance,Your words are value for me.
Hi please look at this,
<div class="row">
<div class="col-lg-5"></div>
<div class="col-lg-15">
<div class="row">
<div class="col-lg-**2/3**"></div>
<div class="col-lg-**1/3**"></div>
</div>
</div>
How Can I do it without separator?
I would like to do something like that:
<div class="row">
<div class="col-lg-10"></div>
<div class="col-lg-5"></div>
</div>
This is Grid - 20 columns, 5 column sidebar 15 rest.
Bootstrap is based on a 12 column grid. If you want a column to be 2/3's of a page with a sidebar 1/3 I would do the following.
<div class="container>
<div class="row">
<div class="col-sm-8">
<p> This content is 2/3 of the page</p>
</div><!-- col-sm-8 -->
<div class="col-sm-4 -->
<p>This content is 1/3 of the page</p>
</div><!-- col-sm-4 -->
</div><!-- row -->
</div><!-- container -->
If you are wanting it to be responsive I would start with defining the smaller screen size "col-sm-?" and large screens will inherit this.
Otherwise, I'm not sure what you are trying to achieve and what you mean by separator. Could you clarify?
Hope this helps.