'Bootstrap Container Width Instead of Screen Width

I'm using Bootstrap 4, but I don't want to use screen width. I want layout over whatever width the container has.

I couldn't find the details after searching.

The following codes are placed according to the screen width. However, I want it to be adjusted according to the current width of the container I specified.


<div class="row">

<div class="col-lg-4">

SIDEBAR

</div>

<div class="col-lg-8">

<div class="row"> /*The following boxes should be shaped according to the width of this container.*/
<div class="col-xl-4 col-lg-3">A</div>
<div class="col-xl-4 col-lg-3">B</div>
<div class="col-xl-4 col-lg-3">C</div>
<div class="col-xl-4 col-lg-3">D</div>
</div>

</div>

</div>
htmlcssbootstrap-4


Solution 1:[1]

I'm not very sure what you need exactly, but it seems that you want a boxed layout instead a fluid one. If you use a .container class will apply the boxed effect you want.

<div class="container">
    <div class="row">
        <div class="col-lg-3 col-xl-4">Column</div>
        <div class="col-lg-3 col-xl-4">Column</div>
    </div>
</div>

Here the documentation: https://getbootstrap.com/docs/4.0/layout/overview/

If this is not what you need, please try to be more clear about your goal.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Toni Bordoy

Related Questions