CODEWITHSUNDEEP
htmlcssbootstrap-5
Catogram
Catogram

Reputation: 323

Force Bootstrap Columns to Stay Within Container

I am trying to have a two row hierarchy display for some photos using bootstrap 5. However, rather than staying within the container the images overflow out. I want the container to fill the screen so that it acts as a cover display without the user having to scroll. How can I make them dynamically resize to fit the container?

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="height: 100vh; background-color: yellow;">
    <div class="row justify-content-center">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
    <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
</div>

The elements are overflowing like this: Overflowing images

I want it to instead scale down the images to look like this: Images fitting

I tried setting a set height on the elements, but then they take up the whole screen as if the height is not defined relative to the container. Is there some different method I can use to display the images so that they change dynamically?

Upvotes: 1

Views: 1114

Answers (1)

Dexterians
Dexterians

Reputation: 1021

The only thing I can think of regarding your issue is the fact you have height: 100vh set on your container. Remove it.

As you can see here, I added another row and your container scaled just fine;

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="background-color: yellow;">
    <div class="row justify-content-center">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
    <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
   <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
</div>

However, if you put the height back in, you will see not so fine;

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<div class="container" style="height: 100vh; background-color: yellow;">
    <div class="row justify-content-center">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
    <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
   <div class="row">
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
        <div class="col col-12 col-md-4">
            <img class="w-100 p-5" src="https://via.placeholder.com/1080" style="border-radius: 80px;">
        </div>
    </div>
</div>

Remember, if you set a height or width of an object it is BOUND to that restriction. If you remove width or height, it's dynamic or based on the object.

Upvotes: 1

Related Questions