Bootstrap responsive container

bootstrap question

<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

62 Replies

ἔρως•4w ago

what do you want the image to do?

KingpinOP•4w ago

atm the image takes the size of the container, but I want the width to stretch out to the viewport edge.

KingpinOP•4w ago

like this from the design

KingpinOP•4w ago

I already had a solution but the text doesn't align with the other text on the page which uses the bootstrap containers

ἔρως•4w ago

basically, you want the image to leave the container?

KingpinOP•4w ago

ye, havent really found a class for that. I mean you have container-fluid but it doesnt'seem to work as expected when I put it on the div where the col classes are

ἔρως•4w ago

i honestly forgot how it used to be done, but was a massive pita

Mannix•4w ago

i don't think there is one for that on bootstrap

KingpinOP•4w ago

ye...

ἔρως•4w ago

no, but there are tricks to make it happen

KingpinOP•4w ago

How do you even call this? cuz idk what to look for..

ἔρως•4w ago

escape the container but i have an idea for you this is pseudo-code:

<row - width 100dvw and 0 padding>
  <col-6 margin-left equal to .container>
    content comes here
  <col-6>
    image comes here

<row - width 100dvw and 0 padding>
  <col-6 margin-left equal to .container>
    content comes here
  <col-6>
    image comes here

KingpinOP•4w ago

  picture {
    display: block;
    width: 50vw;

    img {
      width: 100%;
      height: $height;
      object-fit: cover;
    }
  }

  picture {
    display: block;
    width: 50vw;

    img {
      width: 100%;
      height: $height;
      object-fit: cover;
    }
  }

I fixed it lol apparently it was as simple as adding display block and width 50vw uh not quite nvm lol

KingpinOP•4w ago

it works here

ἔρως•4w ago

you should set an aspect ratio the image is stretched

KingpinOP•4w ago

but not here

KingpinOP•4w ago

the aspect ratio is already set in twig tho?

      {{ img.responsiveImage(photo, {
        aspectRatio: '1:1',
        quality: 80,
        transformHandle: 'img2Webp'
      }) }}

      {{ img.responsiveImage(photo, {
        aspectRatio: '1:1',
        quality: 80,
        transformHandle: 'img2Webp'
      }) }}

ἔρως•4w ago

is it set in css?

KingpinOP•4w ago

it doesn't change anything if I add it in css. the images don't look stretched tho

ἔρως•4w ago

if you remove the height, it will

KingpinOP•4w ago

no?

KingpinOP•4w ago

the object-fit: cover was already there

ἔρως•4w ago

you're setting the wrong aspect ratio that can't be 1:1

KingpinOP•4w ago

idk what you're talking about tho, I get it from the aspect ratio but not the stretched image.

ἔρως•4w ago

if you hover the url, what does it say?

KingpinOP•4w ago

the rendered size is different the the actual size, I think this is the case with all my images.

ἔρως•4w ago

you should set an aspect-ratio: 1/1

vince•4w ago

Could not use bootstrap for this section and then just use grid. My 2cents

KingpinOP•3w ago

I found a fix on Stackoverflow actually. He did some calculations with left and right using position relative.

    position: relative;
    right: calc(-1 * (100vw - 200%) / 2);
    left: 0;

    position: relative;
    right: calc(-1 * (100vw - 200%) / 2);
    left: 0;

For those curious this is what they did. it respect the bootsrap container but visually it will appear the way I want.

Gaming

Programming

Bootstrap responsive container

Did you find this page helpful?