How to make this out of grid layout work on all screen

Question

Basically I have to code this layout and not sure how to tackle it.

Here's the layout.

This won't work.

    <div class="container">
      <div class="row">
        <div class="col-md-4">
         text
        </div>
        <div class="col-md-8">
         image
        </div>
      </div>
   </div>

And this won't either.

    <div class="container-fluid">
      <div class="row">
        <div class="col-md-4">
         text
        </div>
        <div class="col-md-8">
         image
        </div>
      </div>
   </div>

There has to be a better way of handling this layout than typing many media queries for different breakpoint.

I'm using Bootstrap 4. CSS grid solution works too.

Thanks

Please explain properly your issue. what you have tried and what you expecting. — Joykal Infotech, Apr 09 '19 at 07:48
`width: 100%` wouldn't work @Roy since the image is inside the `.container` class, which means it won't exceed the container widths specified in that class. — Marc Hjorth, Apr 09 '19 at 08:07

score 0 · Answer 1 · answered Apr 09 '19 at 07:56

This example isn't using Bootstrap 4 or CSS Grid, but hopefully you can use this as a proof of concept. I tried to make it as simple as possible.

Basically you just swap between a full-width grid and a regular grid, which I defined with .container and .container-full-width. You can change the values so they suit your needs.

JSFiddle Demo here

html,
body {
  margin: 0;
  padding: 0;
}

.section {
  width: 100%;
  height: auto;
}

.section:nth-child(even) {
  background: #9a9a9a;
}

.container {
  display: flex;
  max-width: 700px;
  margin: 0 auto;
}

.container--full-width {
  max-width: 2600px;
}

img {
  width: 100%;
  height: auto;
}

.half {
  width: 50%;
}

<div class="section">
  <div class="container">
      <div class="half">
         <img src="https://placekitten.com/1000/600" alt="">
      </div>
      <div class="half">
        <p>text</p>
      </div>
  </div>
</div>

<div class="section">
  <div class="container container--full-width">
      <div class="half">
         <img src="https://placekitten.com/1000/600" alt="">
      </div>
      <div class="half">
        <p>text</p>
      </div>
   
  </div>
</div>

score 0 · Answer 2 · answered Apr 09 '19 at 07:58

Is it what you are trying to achieve ?

.col-8{
  background:red;
}
.col-4{
  background:green;
}

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


  <div class="container">
      <div class="row">
        <div class="col-4">
           1/3
        </div>
        <div class="col-8">
           2/3
        </div>   
      </div>
   </div>

For more informations see Bootstrap - Grid system

How to make this out of grid layout work on all screen

2 Answers2