0

I'm working on a react js project where I'm using the mdbootstrap, I'm trying to build a component similar to this enter image description here

enter image description here

the first picture is for desktop and another is for mobile users

So, I was trying to achieve something similar and I started playing with bootstrap classes but couldn't achieve this in my react project. But to my surprise in my project, the columns are not taking full width. Why is it happening and what can I do?

Here's it working fine in normal HTML: 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
  <!-- Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
  <!-- Bootstrap core CSS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- Material Design Bootstrap -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-8" style="background-color: red;">
        One of two columns
      </div>
      <div class="col-sm-4" style="background-color: yellow;">
        One of two columns
      </div>
    </div>
  </div>
</body>

</html>

Check this code on JsFiddle.

Here's the link for my react js project and the component is profile.js you can check it through navbar: https://codesandbox.io/s/dawn-flower-iqcuz

Here's what I'm getting

enter image description here

This is what I want

enter image description here

johannchopin
  • 13,720
  • 10
  • 55
  • 101
Raghav Sharma
  • 141
  • 2
  • 13
  • 1
    Open your dev tools and look at the elements. You probably have your elements wrapped in a container that isn’t set to 100% width. – Nick Kinlen Apr 05 '20 at 19:07
  • It was with react, I've removed it and it is working fine. How can I let the yellow one go above the orange one in a responsive mode? – Raghav Sharma Apr 05 '20 at 19:39

1 Answers1

1

Your example code is right so it does not help in solving the problem.

I suspect that you used right class container-fluid (max-width: 100% - 100% of the parent not 100% of the viewport) but this wrapper is placed in another div with a class container (max-width: 1200px).

If so your container-fluid is limited by container and behaves like it because max-width:100% is equal 1200px.

Deykun
  • 1,298
  • 9
  • 13
  • yes you're right I think. How can I make the yellow column go above the orange one while in a responsive mobile device view? – Raghav Sharma Apr 05 '20 at 19:38
  • Just don't use `
    ` in App.js instead add div with that class in routes which you want to have it. After changing it to `
    ` - `container-fluid` is working on the profile page.
     – Deykun Apr 05 '20 at 21:10
  • it's not working :( I'm getting the smaller column on below the first only – Raghav Sharma Apr 06 '20 at 06:33