Bootstrap responsive container
bootstrap question
I currently have my container set up like this but does anyone know a way using bootstrap how to make sure the image does take the full fluid width?
as shown in the image
<section class="c-blog container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="c-blog__info">
<div class="c-blog__title">
<p>{{ time.timeAgo(section.postDate) }}</p>
{% set title = section.title ?? '' %}
{% set parts = title|split('#')|filter(v => v|trim is not empty) %}
{% include '_components/_subtitle.twig' with {
title: parts[0] ?? '',
description: parts[1] ?? ''
} %}
</div>
<div class="c-blog__description">
<p>{{ section.description }}</p>
<a href="{{ section.blogLink.value }}">{{ section.blogLink.label }}</a>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
{{ img.responsiveImage(photo, {
aspectRatio: '100:100',
quality: 80,
transformHandle: 'img2Webp'
}) }}
</div>
</div>
</section><section class="c-blog container">
<div class="row">
<div class="col-12 col-lg-6">
<div class="c-blog__info">
<div class="c-blog__title">
<p>{{ time.timeAgo(section.postDate) }}</p>
{% set title = section.title ?? '' %}
{% set parts = title|split('#')|filter(v => v|trim is not empty) %}
{% include '_components/_subtitle.twig' with {
title: parts[0] ?? '',
description: parts[1] ?? ''
} %}
</div>
<div class="c-blog__description">
<p>{{ section.description }}</p>
<a href="{{ section.blogLink.value }}">{{ section.blogLink.label }}</a>
</div>
</div>
</div>
<div class="col-12 col-lg-6">
{{ img.responsiveImage(photo, {
aspectRatio: '100:100',
quality: 80,
transformHandle: 'img2Webp'
}) }}
</div>
</div>
</section>I currently have my container set up like this but does anyone know a way using bootstrap how to make sure the image does take the full fluid width?
as shown in the image
