Bootstrap 4 container inside container-fluid with image (content margin)

Question

really hard to explain what i want so i made a picture.

I don't find anything here about it but maybe i'm not searching it right way. My question is: How to make this container with content (red one). (green is container, blue is container-fluid

and grey is image background).

Can you explain that further? I see it very clearly in your image, so you managed to get it there anyway... — Nico Haase, Feb 25 '19 at 11:33
how i get the right margin from the right side off red div, Margin should be same as usualy container margin... — Janík Janis Čatloš, Feb 25 '19 at 11:35

Nick Parsons · Accepted Answer · 2019-02-25T11:49:41.590

Instead of having one container be fluid, and the another not, I recommend you make both containers fluid by creating a column to hold the contents of the container.

In order to create a column, you can make use of bootstrap's grid system. This way you can count how many columns each row should span across, allowing you to align content up like you wish:

.outline-green {
  outline: 1px solid lime;
}

.outline-blue {
  outline: 1px solid blue;
}

.outline-red {
  outline: 1px solid red;
}

#so-logo {
  height: 100%;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row">
    <div class="offset-3 col-6 outline-green">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

<div class="container-fluid outline-blue">
  <div class="row">
    <div class="col-6 outline-blue">
       <img id="so-logo" src="https://i0.wp.com/wptavern.com/wp-content/uploads/2016/07/stack-overflow.png?ssl=1" alt="Stackoverflow Logo" />
    </div>
    <div class="col-3 outline-red">
      <p>Content</p>
      <p>Content</p>
      <p>Content</p>
    </div>
  </div>
</div>

Not a great idea since for non-fluid content you now have to use offsets. — Warface, Oct 06 '22 at 17:25

Bootstrap 4 container inside container-fluid with image (content margin)

1 Answers1