1

I need a section in bootstrap where there are two columns (6 and 6) in a row.

The left 6 column div needs to have the fluid effect where its contains stretch to the browser window's left edge.

The right 6 column div needs its contents to match/be kept within the right-side confines of the other sections of the page that have a normal (non-fluid) container class (which has a width of 1170px).

How can I best achieve this effect?

2 Answers 2

3

This is for 1170px wide container, you need media queries for the rest of the sizes. Hopefully helps.

CSS:

.stretch-left {
    margin-left: calc((100vw - 1170px) / -2);
}

HTML:

<div class="container">
    <div class="row">
        <div class="col-md-6 stretch-left">
            content
        </div>
        <div class="col-md-6">
            content
        </div>
    </div>
</div>
0

To make the left column stretch to the edge of the screen while the right column stays within a specific container size, you can use a combination of Bootstrap's container-fluid class and some custom CSS:

HTML:

<div class="container-fluid">
    <div class="row">
        <div class="col-md-6">
            <h4>this block is going until the edge of the screen</h4>
        </div>
        <div class="col-md-6 offset-custom">
            <h4>this block is pushed inside the container again</h4>
        </div>
    </div>
</div>

In this setup, the container-fluid ensures that the row takes up the full viewport width. The custom class offset-custom will be used to adjust the positioning and width of the right column.

CSS:

    /* Define a variable for the container width */
:root {
    --container: 1320px;
}

.offset-custom {
    /* Adjust the left padding for the right column to start its content from a desired position (considering a 12-column grid) */
    padding-left: calc(var(--container) / 12 * 1 + 12px);
    
    /* Control the maximum width of the right column content */
    max-width: calc(var(--container) / 12 * 6);
}

This should give you the desired effect of having the left column content stretch to the edge of the screen while the right column stays within the confines of a specific container size.

I hope this helps! Let me know if you have any further questions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.