CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
knox-flaneur
knox-flaneur

Reputation: 149

Bootstrap - Container-fluid with two columns. Right side needs to be confined

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?

Upvotes: 1

Views: 2511

Answers (2)

Digital Leap GmbH
Digital Leap GmbH

Reputation: 1

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.

Upvotes: 0

UnpassableWizard
UnpassableWizard

Reputation: 1279

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>

Upvotes: 3

Related Questions