I have designed a layout for an image grid with 9 images. I want to loop through my array of images and fill the grid dynamically so that the 10th image starts a new grid and is styled like the first image, 11th like the second image and so on...
The array won't always contain a multiple of 9.
This is what I currently have: (with fixed array indexes to show the order of images)
<div class="widget-body">
{% for mediaItem in mediaItems|batch(9) %}
<div class="d-flex flex-wrap">
<div class="col-12 p-0">
<img class="w-100" src="{{ (mediaItems[0].getWebPath()) }}" alt="{{ mediaItems[0].title }}"/>
</div>
</div>
<div class="d-flex flex-wrap">
<div class="col-6 p-0">
<div class="customGrid-background-img customGrid-rectangle" style="background-image: url('{{ (mediaItems[1].getWebPath()) }}')"></div>
</div>
<div class="col-6 p-0">
<div class="d-flex flex-wrap">
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[2].getWebPath()) }}')"></div>
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[3].getWebPath()) }}')"></div>
</div>
</div>
</div>
<div class="d-flex flex-wrap">
<div class="col-6 p-0">
<div class="d-flex flex-wrap">
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[4].getWebPath()) }}')"></div>
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[5].getWebPath()) }}')"></div>
</div>
<div class="d-flex flex-wrap">
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[6].getWebPath()) }}')"></div>
<div class="col-6 p-0 customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[7].getWebPath()) }}')"></div>
</div>
</div>
<div class="col-6 p-0">
<div class="customGrid-background-img customGrid-square" style="background-image: url('{{ (mediaItems[8].getWebPath()) }}')"></div>
</div>
</div>
{% endfor %}
</div>
I have 10 images in the mediaItems array, which results in the grid being shown twice with the first 9 images.
I needed to use a fill argument with the batch filter to be able to use the second batch.
{% for mediaItem in mediaItems|batch(9, 'empty') %}
I also accidentally used mediaItems for the images. It should be mediaItem (for example: background-image: url('{{ (mediaItem[1].getWebPath()) }}'))
Related
I have the following code
<div class="container-fluid" id="calc-container">
<div class="row">
<div class="col-4 d-flex align-items-center justify-content-center text-center mx-auto">
<div class="row">
<div class="col-4 d-flex align-items-start justify-content-start text-start">
<span class="flex-column me-4">Country :</span>
</div>
<div class="col-8 d-flex align-items-end justify-content-end text-end">
<label>
<select class="form-select">
{% for c in countries %}
{% if forloop.first %}
<option selected>{{ c }}</option>
{% else %}
<option>{{ c }}</option>
{% endif %}
{% endfor %}
</select>
</label>
</div>
</div>
</div>
</div>
<div class="row mt-2">
<div class="col-4 d-flex align-items-center justify-content-center text-center mx-auto">
<div class="row">
<div class="col-4 d-flex align-items-start justify-content-start text-start">
<span class="flex-column me-4">Postcode :</span>
</div>
<div class="col-8 d-flex align-items-end justify-content-end text-end">
<input type="text" id="textPostcode" class="form-control">
</div>
</div>
</div>
</div>
</div>
It works OK on the big screen, but when I make window smaller or preview in mobile then "Country" and "Postcode" labels overlap with the inputs. For some reason breakpoints are not working here. Do you have any ideas how to make it work?
Now i have this:
<div class="row row-cols-1 row-cols-md-2 g-4">
{{#each stories}}
<div class="col">
<div class="card shadow-sm">
<img class="card-img-top" src="{{ image }}">
<div class="card-body">
<p class="card-text">{{ description }}</p>
<div class="d-flex justify-content-between align-items-center">
Читать
<small class="text-muted">author</small>
</div>
</div>
</div>
</div>
{{/each}}
</div>
And it looks like:
Now
I want the cards to be under each other: Reference
if you wanna put every card under each other you should put w-100 to each of cards or change your code like this :
<div class="row g-4">
{{#each stories}}
<div class="col-lg-12 mx-auto">
<div class="card shadow-sm">
<img class="card-img-top" src="{{ image }}">
<div class="card-body">
<p class="card-text">{{ description }}</p>
<div class="d-flex justify-content-between align-items-center">
Читать
<small class="text-muted">author</small>
</div>
</div>
</div>
</div>
{{/each}}
</div>
I am used two images button and place them in a a tag in the same bootstrap column. However this is how they look like:
This is my code:
<body>
<div class="backgroundImage">
<div class="text-right p-3">
<b>{{ __('Be A Dealer') }}</b>
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-4 col-md-4 mx-auto my-auto">
<img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
</div>
</div>
</div>
<div class="container">
<div class="row mb-4">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h2 class="bujishu-motto">
A home is made of
<i>
<p class="bujishu-recursive">hopes</p>
</i>
and
<i>
<p class="bujishu-recursive">dreams</p>
</i>
</h2>
<h2 class="bujishu-motto">
Let us
<i>
<p class="bujishu-recursive">inspire</p>
</i>
you to build the perfect home!
</h2>
</div>
</div>
<div class="row mt-4">
<div class="col-6 col-md-4 offset-md-3 ">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
{{-- </div>
<div class="col-6 col-md-4 "> --}}
<img class="landing_button" src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up">
</div>
</div>
</div>
</div>
</div>
</body>
How do I align so the next two buttons are next to each other with some spacing between them as well?
Use d-flex and class in your col.
<div class="col-6 col-md-4 offset-md-3 d-flex">
You can also add pl-3 class to SIGN UP button for the space between the buttons.
If you are using Bootstrap 4 it will work if you use two columns, each of size 6 or you can change the size of columns accordingly.
<body>
<div class="backgroundImage">
<div class="text-right p-3">
<b>{{ __('Be A Dealer') }}</b>
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-4 col-md-4 mx-auto my-auto">
<img class="mw-100" src="{{ asset('storage/logo/Bujishu_logo.png') }}" alt="Bujishu">
</div>
</div>
</div>
<div class="container">
<div class="row mb-4">
<div class="col-12 col-md-8 offset-md-2 text-center">
<h2 class="bujishu-motto">
A home is made of
<i>
<p class="bujishu-recursive">hopes</p>
</i>
and
<i>
<p class="bujishu-recursive">dreams</p>
</i>
</h2>
<h2 class="bujishu-motto">
Let us
<i>
<p class="bujishu-recursive">inspire</p>
</i>
you to build the perfect home!
</h2>
</div>
</div>
<div class="row mt-4">
<div class="col-6 col-md-6">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
</div>
<div class="col-6 col-md-6">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Sign Up">
</div>
</div>
</div>
</div>
</body>
the entire row columns are about 12 columns so it should be col-md-6 or add d-flex to the row itself.
<div class="row mt-4">
<div class="col-6 col-md-6 ">
<img class="landing_button" src="{{ asset('storage/buttons/Login-Icon.png') }}" alt="Login">
</div>
<div class="col-6 col-md-6 ">
<img class="landing_button" src="{{ asset('storage/buttons/Sign-Up.png') }}" alt="Sign Up">
</div>
</div>
I'm trying to create a grid using the Bootstrap 4 card component. For this, I have read the documentation and used the card-deck option. I want that every row has two columns with a similar behaviour to col-12 col-md-6, with the particularity that the second column will also be splited into two rows, each one having an horizontal card. I have this piece of code:
<div class="container">
<div class="row">
<div class="card-deck">
<div class="card">
<img
class="card-img-top"
src$="{{getArticleImage2(article1)}}"
/>
<div class="card-body py-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article1)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article1)}}">
{{getSources(article1)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article1.schema:headline}}
</p>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article2)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article2)}}">
{{getSources(article2)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article2.schema:headline}}
</p>
</div>
</div>
</div>
</div>
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img
class="card-img"
src$="{{getArticleImage2(article2)}}"
/>
</div>
<div class="col-md-7">
<div class="card-body p-2">
<div class="d-flex justify-content-start align-items-center mb-2">
<img class="icon-sm mr-2 img-fluid" src={{getFavIcon(article3)}}>
<a class="card-link medium-text" target="_blank" href$="https://{{getSources(article3)}}">
{{getSources(article3)}}
</a>
</div>
<p class="card-text article-headline medium-text">
{{article3.schema:headline}}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The problem is that with this disposition I have three cols instead of two. The last two cards are displayed horizontally, but they are not stacked one below the other. Here is a code snippet. How could I achieve this?
if you added a div with class card-columns like that:
<div class="card-deck">
<div class="card-columns">
<div class="card">
<img
class="card-img-top"
src=""
/>
<div class="card-body py-2">
//.................
it will give you two cloumns one with a card displayed vertically and the other contains two horizontal cards.
Also read the last section of the documentation maybe it will be helpful for you to specify how many cards included in one column
https://getbootstrap.com/docs/4.3/components/card/
hi I wants to show these columns in horizontal manner but these are showing in vertical manner ow can I change it;
blade file:
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
#foreach($category->products as $pro_data)
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div>
If I understand you correctly you are trying to show the products of the categories next to each other horizontally but you are seeing them vertically at the moment.
I think a proper way would wrap the foreach with your
<div class="col-lg-3 mb-4"></div> which gives us
<div class="row">
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</div>
</div>
#endforeach
</div>
Hope it helps!
#foreach($category->products as $pro_data)
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
Hope this will work for.
I would float the divs to the left with some padding and use clearfix if needed.
All cards appeared in the horizontal manner because you might did't wrap them all without .row class
Because a set of css properties are applied to the .row class
Try the following approach:
<div class="row">
<div class="col-lg-3 mb-4">
</div>
</div>
Your code should be something like this. Added a row wrapper and col inside the loop. I assume <div class="col-lg-3 mb-4"> is your container for all cards.
<div class="col-lg-3 mb-4">
<!-- Input & Button Groups -->
<div class="row">
#foreach($category->products as $pro_data)
<div class="col">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
#endforeach
<!-- / Input & Button Groups -->
</div><!-- end of row -->
</div>
in bootstrap 4 you can use columns in horizontal manner. You did't wrap them all without use .row class this is most important class.
this is the right way if you use bootstrap 4
<div class="row">
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
<div class="col-md-3 mb-4"></div>
</div>
#foreach($category->products as $pro_data)
<div class="row">
<div class="col-lg-3 mb-4">
<div class="card card-small mb-4">
<div class="card-header border-bottom">
<h6 class="m-0">{{ $pro_data->product_name }}</h6>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item px-3">
<div class="input-group mb-3">
<div class="input-group input-group-seamless">
<img src="{{ URL::to('/') }}/images/backend_images/category_images/{{ $pro_data->product_image }}" class="img-thumbnail" style="width: 400px; height: 300px;" />
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
#endforeach