Bootstrap 4 - Two column layout - One fixed, one fluid?

Asked Nov 13 '19 at 10:48

Active Nov 13 '19 at 12:35

Viewed 497 times

I'm trying to code a website which looks like this:

In one row, two columns
one behaive like the container would be container-fluid, the other like container

I tried several ways I could imagine but none worked. This is my output code:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-6 bg-primary text-white">
      <h1>Hey there</h1>
    </div>
    <div class="col-6 bg-secondary">

    </div>
  </div>
</div>

Any one an idea? It's important the the margin is the same like container since all elements of the website should start in one line.

edited Nov 13 '19 at 12:35

G-Cyrillus

101,410
14
105
129

asked Nov 13 '19 at 10:48

Lars Flieger

2,421
1
12
34

https://stackoverflow.com/questions/33564131/bootstrap-full-width-with-2-different-backgrounds-and-2-columns – Paulie_D Nov 13 '19 at 11:02
Will the fluid div contain content all the way to the right or is it just for extending the background? – Paulie_D Nov 13 '19 at 11:16
like this? https://stackoverflow.com/questions/48598458/extend-an-element-beyond-the-bootstrap-container – Carol Skelly Nov 13 '19 at 11:48
@Paulie_D It's only to extend the background. The fluid box only is holding a background image. – Lars Flieger Nov 13 '19 at 12:52
1

Then the links provided have your answer. – Paulie_D Nov 13 '19 at 13:04

Bootstrap 4 - Two column layout - One fixed, one fluid?

0 Answers0