Place image outside the Bootstrap container

Asked

Viewed 200 times

0

I need to place an image outside the container, so that the right margin remains the container standard (responsive), and the image always stays together with a "button".

Follow the image below to illustrate:

inserir a descrição da imagem aqui

I tried to use container-Fluid (Example 2 - using container-Fluid in html), but I can’t use the same margin as the container on the right side. I can change by css, but I would have to change for all breakpoints, I would have another way without needing it??

I tried to use the container itself (Example 3 - using container and margin-left: 0px in html) and take the margin-left, without success.

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <title>Test</title>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
</head>

<body>
    <h2>Example 1</h2>
    <div class="">
        <div class="container">
            <div class="row">

                <div class="col-6 row">
                    <div class="col pl-0 mt-5">
                        <div class="nav nav-pills"  aria-orientation="vertical">
                            <a class="nav-link active" >Example1</a>
                        </div>
                    </div>
                </div>

                <div class="col-6">
                    <h1>Test</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
                </div>
            </div>
        </div>
    </div>

    <div class="ex1 mt-5">
        <h3>Example 2 - using container-fluid</h3>
        <div class="container-fluid">
            <div class="row">

                <div class="col-6 row">
                    <img src="https://via.placeholder.com/200" alt="">
                    <div class="col pl-0 mt-5">
                        <div class="nav nav-pills"  aria-orientation="vertical">
                            <a class="nav-link active" >Example1</a>
                        </div>
                    </div>
                </div>

                <div class="col-6">
                    <h1>Test</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-5">
        <h3>Example 3 - using container and margin-left: 0px</h3>
        <div class="container" style="margin-left: 0px">
            <div class="row">

                <div class="col-6 row">
                    <img src="https://via.placeholder.com/200" alt="">
                    <div class="col pl-0 mt-5">
                        <div class="nav nav-pills"  aria-orientation="vertical">
                            <a class="nav-link active" >Example1</a>
                        </div>
                    </div>
                </div>

                <div class="col-6">
                    <h1>Test</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Someone would know some way to do it, without me having to trade that margin-right in all the breakpoints?

css twitter-bootstrap bootstrap-4

1 answer

1


I don’t imagine for you to want a kind of layout like this, but it is possible to do using a minimum of CSS, Even so I needed 1 breacking point to treat responsiveness. In the more the layout was as below. Note that now I have a container father, with a son with the imagem and the btn within and a .container.

inserir a descrição da imagem aqui

<!DOCTYPE html>
<html lang="pt-br">

<head>
<title>Test</title>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />

<style>
    .pai {
        position: relative;
    }

    .filho {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
    }

    @media screen and (max-width: 768px) {
        .filho {
            position: relative;
        }
    }

</style>
</head>

<body>


    <div class="container">
        <div class="row">
            <div class="col-12">col12 Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus molestias sequi nam ducimus reiciendis, a cupiditate velit modi optio, placeat doloremque sint voluptas blanditiis? Consequatur numquam dolorem aspernatur ea molestias.</div>
        </div>
    </div>

    <div class="pai d-flex flex-column flex-md-row">
        <div class="filho d-flex flex-nowrap align-items-center mt-5 my-md-auto">
            <img src="https://via.placeholder.com/200" alt="">
            <a href="#" class="btn btn-primary active">Example1</a>
        </div>
        <div class="container my-5">
            <div class="row">
                <div class="col-12 col-md-6 ml-auto ">
                    <h1>Test</h1>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus sit ipsum ullam, necessitatibus quia laboriosam provident, culpa molestias cum magnam error fugiat voluptatem blanditiis dignissimos modi. Reprehenderit repudiandae nisi dolor?</p>
                </div>
            </div>
        </div>
    </div>


    <div class="container">
        <div class="row">
            <div class="col-12">col12 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis consectetur reprehenderit quibusdam velit officiis. Atque quod provident consectetur, adipisci commodi explicabo architecto voluptas est expedita, veniam molestias, deserunt cum impedit.</div>
        </div>
    </div>
</body>

</html>

Browser other questions tagged css twitter-bootstrap bootstrap-4

You are not signed in. Login or sign up in order to post.