Bootstrap 4 Row with Mixed Container and Container-Fluid Column

Question

I'm trying to create a layout that looks like the component on the image.

It's a 12 col bootstrap grid. I'm looking to make the text take up 6 cols, 1 col spacer in-between the text and the last col, and then I'd like the last col (image) to take up the rest of the horizontal space, in and out of the container.

I've trying mixing the container and container-fluid classes (not advisable according to Bootstrap docs) and it doesn't work.

How would one achieve this type of a layout using Bootstrap 4? Image:

Existing code:

<div class="info-side">
    <div class="container-fluid">
        <div class="row">
            <div class="col-6">
                <h2>@Model.TitleText</h2>
                <p>@Model.AreaText</p>
            </div>  
            <div class="col-1">
            </div>
            <div class="col-5">
                <img src="@Model.Image.Url)" alt="@Model.Image.AlternativeText" style="width: 100%; height:100%;">
            </div>
        </div>
    </div>
</div>

score 0 · Answer 1 · answered Mar 28 '21 at 15:51

try this

<div class="info-side" >
    <div class="container">
        <div class="row col">
            <div class="col-6 bg-info">
                <h2>@Model.TitleText</h2>
                <p>@Model.AreaText</p>
            </div>
            <div class="col-1 bg-warning">
            </div>
            <div class="col-5 bg-info">
                <img src="@Model.Image.Url)" alt="@Model.Image.AlternativeText" style="width: 100%; height:100%;">
            </div>
        </div>
    </div>
</div>

I added col to class row @div tag. It expands to all space available.

In another hand, mix containers regular and fluid is possible, but you have to take care of hierarchy: fluid is widest as regular, so regular must be included alone or inside a fluid class. See this answer: link

Good Luck!

score 0 · Answer 2 · answered Mar 30 '21 at 13:59

I've come to the following solution which creates the layout in my original image in the question.

I had to make one row position absolute, this way the two containers are overlapping each other.

<div class="info-side">

    <div class="text-side container" style="position: relative;" >
        <div class="text-area" style="position: absolute;">
            <div class="row">
                <div class="col-6 d-flex align-items-center" style="height: 600px;">
                    <div class="text-items">
                        <h2>@Model.TitleText</h2>
                        <p>@Html.Raw(Model.AreaText)</p>
                    </div>
                </div> 
            </div>
        </div>
    </div>

    <div class="image-side container-fluid">
        <div class="row">
            <div class="col-7"
            <div class="col-5" style="height: 600px; ">
                <img src="@Model.Image.Url" alt="@Model.Image.AlternativeText">
            </div>
        </div>
    </div>

</div>

Bootstrap 4 Row with Mixed Container and Container-Fluid Column

2 Answers2