Responsiveness using React and Bootstrap

Question

I have a problem that I’ve been trying to solve for a long time, and I can’t, which is to let the layout of the site pick up the whole page, it stays this way. https://ibb.co/cHEeS7 (print of how you are)

Note that it occupies only 70% of the screen, the code is like this.

//login.js
class Login extends Component {
render() {
        return (
            <div className="container" id="container-login">
                <div>
                <h2 className="mb-5">Form subscription</h2>
                    <form>
                        <p className="h5 text-center mb-4">Subscribe</p>
                        <Input label="Your name" icon="user" group type="email" validate error="wrong" success="right"/>
                        <Input label="Your email" icon="envelope" group type="email" validate error="wrong" success="right"/>
                        <div className="text-center">
                            <Button color="deep-orange" color="indigo">Send</Button>
                        </div>
                    </form>
                </div>
 </div>

html{
 border:black;
  border-style: solid;
  border-width: 2px;

}
body{
  border:rgb(92, 252, 0);
  border-style: solid;
  border-width: 2px;
}
#root{  
  border: gold;
  border-style: solid;
  border-width: 2px;
  background-image: url("./img/download.jpg");
}
#div-app{
  border: royalblue;
  border-style: solid;
  border-width: 2px;
}

#div-main{
  border: red;
  border-style: solid;
  border-width: 2px;

}

#container-login{
border:rgb(147, 9, 160);
    border-style: solid;
    border-width: 2px;

}

I put edge on each div to try to explain better my problem,

The only way I could make it work was by setting a ( height: 100%; ) in all of HTML until #container-login, this made me take 100% of the screen,.

Follow picture https://ibb.co/kOMLZn

I thought the problem would be solved, but when I put the resolution simulating a cell phone along with more forms and buttons the screen pops down and div does not come together.

follows picture https://ibb.co/fa7mqS

In this example here https://ibb.co/jEvgqS I can make it clearer what happens.

Answer 1

To grab the whole screen, you need to use the "container-Fluid" there it will pick up 100% of the screen. Different from the "container" that leaves boxed the layout.

I hope I’ve helped.

More information on bootstrap documentation: https://getbootstrap.com/docs/4.1/layout/overview/