title: React-bootstrap, Modal appearing halfway off screen
body: <p>I am new to frontend development and I've been trying to get the modal to the center of the screen but it will not move from the far right side of the screen. The css I am using is "bootstrap/dist/css/bootstrap.min.css". Do I need to create my own css file to fix this?</p>
  
  <pre><code>import React, { Component } from "react";
  import "./App.css";
  import LoginPage from "./LoginPage";
  import "bootstrap/dist/css/bootstrap.min.css";
  import { Modal, Button } from "react-bootstrap";
  
  import ReactTelephoneInput from "react-telephone-input/es/ReactTelephoneInput";
  class App extends Component {
  state = {
      selectLoginOption: false,
      userLoginOption: false,
      restaurantLoginOption: false,
      deliveryAgentLoginOption: false,
      closeAllOptionsOfSelectionForm: false
  };
  
  style = {
      left: 0
  };
  
  login = () =&gt; { debugger;
      let obj={}
      obj.email=this.state.email;
  
      fetch('/login',
          {
              header:{
                  "Accept": "application/json",
                  "Content-Type": "application/json"
              },
              method:'POST',
              type:"cors",
              body:JSON.stringify({obj})
  
          }
      ).then(function(res){ debugger; return res.json(); })
          .then(function(data){ console.log( JSON.stringify( data ) ) })
  
  }
  
  
  register = () =&gt; { debugger;
      let obj={}
      obj.user_email=this.state.useremail;
      obj.user_name=this.state.username;
      obj.userPassword = this.state.userpassword;
      obj.user_phonenum = this.state.userphonenumber;
      fetch('/userRegistration',{
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
              },
              body:JSON.stringify({
                  user_email: this.state.useremail,
                  user_name:this.state.username,
                  userPassword : this.state.userpassword,
                  user_phonenum : this.state.userphonenumber
              })
          }
      ).then(function(res){ debugger; return res.json(); })
          .then(function(data){ console.log( JSON.stringify( data ) ) })
  
  }
  DeliveryAgentregister = () =&gt; { debugger;
  
      fetch('/AgentRegistration',{
              method: 'POST',
              headers: {
                  'Content-Type': 'application/json',
              },
              body:JSON.stringify({
                  deliveryAgent_Name: this.state.DeliveryAgentName,
                  deliveryAgent_EmailID:this.state.DeliveryAgentEmailID,
                  deliveryAgent_Password : this.state.DeliveryAgentPassword,
                  deliveryAgent_ConfirmPassword : this.state.DeliveryAgentConfirmPassword,
                  deliveryAgent_PhoneNumber: this.state.DeliveryAgentPhoneNumber
              })
          }
      ).then(function(res){ debugger; return res.json(); })
          .then(function(data){ console.log( JSON.stringify( data ) ) })
  
  }
  
  selectLoginOption = () =&gt;{
      this.setState({selectLoginOption: true})
  }
  userLoginOption = () =&gt; {
      this.setState({ userLoginOption: true, selectLoginOption:false, restaurantLoginOption: false, deliveryAgentLoginOption: false  });
  }
  restaurantLoginOption = () =&gt; {
      this.setState({ userLoginOption: false, selectLoginOption:false, restaurantLoginOption: true, deliveryAgentLoginOption: false  });
  }
  deliveryAgentLoginOption  = () =&gt; {
      this.setState({ userLoginOption: false, selectLoginOption:false, restaurantLoginOption: false, deliveryAgentLoginOption: true  });
  }
  closeAllOptionsOfSelectionForm= () =&gt; {
      this.setState({ userLoginOption: false, selectLoginOption:false, restaurantLoginOption: false, deliveryAgentLoginOption: false  });
  }
  getTitle() {
      if (this.state.userLoginOption) {
          return "User Login";
      } else if (this.state.restaurantLoginOption) {
          return "Restaurant Login";
      } else if (this.state.deliveryAgentLoginOption) {
          return "Delivery Agent Login";
      }
  }
  
  render() {
      const { country, region } = this.state;
      return (
          &lt;div className="App"&gt;
              &lt;header&gt;
                  &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/&gt;
                  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
                  &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
                  &lt;link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/&gt;
                  &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"&gt;&lt;/script&gt;                    &lt;script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
                  &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"/&gt;
                  &lt;script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
                  &lt;script src="//code.jquery.com/jquery-1.11.1.min.js"&gt;&lt;/script&gt;
                  &lt;nav class=" navbar navbar-expand-lg navbar-dark "&gt;
                      &lt;div class="container"&gt;
                          &lt;a class="navbar-brand " href="#"&gt;YumDrop&lt;/a&gt;
                          &lt;div class="collapse navbar-collapse" id="navBarLinks"&gt;
                              &lt;ul class="navbar-nav mr-auto"&gt;
                                  &lt;li class="nav-item" &gt;
                                      &lt;a class="nav-link" onClick={this.selectLoginOption}&gt;Login&lt;/a&gt;
                                  &lt;/li&gt;
                                  &lt;li class="nav-item" id="SignUpID"&gt;
                                      &lt;a class="nav-link" href="#"&gt;Sign Up&lt;/a&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/header&gt;
              &lt;div class="view rgba-black-light"&gt;
                  &lt;div class=""&gt;
                      &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                      &lt;li&gt;
                          &lt;p id="para" &gt;Are you hungry?&lt;/p&gt;
                      &lt;/li&gt;
                      &lt;ul class="list-unstyled"&gt;
                          &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
                          &lt;li&gt;
                              &lt;div class="form-row" data-wow-delay="0.4s"&gt;
                                  &lt;div class="col-md-5"  id="firstbar"&gt;
                                      &lt;div class="md-form"&gt;
                                          &lt;select className="form-control" id="exampleFormControlSelect1"&gt;
                                              &lt;option&gt;Bloomington, Indiana&lt;/option&gt;
                                              &lt;option&gt;Indianapolis, Indiana&lt;/option&gt;
                                          &lt;/select&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-md-4"&gt;
                                      &lt;div className="md-form"&gt;
                                          &lt;input type="text"
                                                 placeholder="Search for food, cuisines, restaurants here.."
                                                 id="form5" className="form-control validate"/&gt;
  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-md-12" id="buttonOrder"&gt;
                                      &lt;div className="md-form"&gt;
                                          &lt;button className="btn btn-lg btn-danger"&gt;Order&lt;/button&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;Modal  show={this.state.selectLoginOption} onHide={this.closeAllOptionsOfSelectionForm} animation={false} &gt;
                  &lt;Modal.Header className="modelheader"&gt;
                      &lt;Modal.Title className="modeltitle"&gt;
                          &lt;strong&gt;Select Login&lt;/strong&gt;
                      &lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
                  &lt;Modal.Body&gt;
                      &lt;div className="container"&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="main"&gt;
                                  &lt;form role="form"&gt;
                                     &lt;button  onClick={this.userLoginOption} className="btn btn btn-primary"&gt;User &lt;/button&gt;&lt;br/&gt;
                                      &lt;button onClick={this.restaurantLoginOption} className="btn btn btn-primary"&gt;Restaurant &lt;/button&gt;&lt;br/&gt;
                                      &lt;button onClick={this.deliveryAgentLoginOption} className="btn btn btn-primary"&gt;Delivery Agent &lt;/button&gt;
                                  &lt;/form&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/Modal.Body&gt;
              &lt;/Modal &gt;
              &lt;Modal
                  show={
                      this.state.deliveryAgentLoginOption ||  this.state.userLoginOption ||  this.state.restaurantLoginOption
                  }
                  onHide={this.closeAllOptionsOfSelectionForm} animation={false} centered &gt;
                  &lt;Modal.Header&gt;
                      &lt;Modal.Title&gt;{this.getTitle()}&lt;/Modal.Title&gt;
                  &lt;/Modal.Header&gt;
                  &lt;Modal.Body&gt;
                      &lt;div class="container"&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="main"&gt;
                                  &lt;h3&gt;Please Log In, or &lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/h3&gt;
                                  &lt;div className="row"&gt;
                                      &lt;div className="col-xs-6 col-sm-6 col-md-6"&gt;
                                          &lt;a href="#" className="btn btn-lg btn-primary btn-block"&gt;Facebook&lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div className="col-xs-6 col-sm-6 col-md-6"&gt;
                                          &lt;a href="#" className="btn btn-lg btn-info btn-block"&gt;Google&lt;/a&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className="login-or"&gt;
                                      &lt;hr className="hr-or"/&gt;
                                      &lt;span className="span-or"&gt;or&lt;/span&gt;
                                  &lt;/div&gt;
                                  &lt;form role="form"&gt;
                                      &lt;div className="form-group"&gt;
                                          &lt;label htmlFor="inputUsernameEmail"&gt;Username or email&lt;/label&gt;
                                          &lt;input type="text" className="form-control" id="inputUsernameEmail"/&gt;
                                      &lt;/div&gt;
                                      &lt;div className="form-group"&gt;
                                          &lt;a className="pull-right" href="#"&gt;Forgot password?&lt;/a&gt;
                                          &lt;label htmlFor="inputPassword"&gt;Password&lt;/label&gt;
                                          &lt;input type="password" className="form-control" id="inputPassword"/&gt;
                                      &lt;/div&gt;
                                      &lt;div className="checkbox pull-right"&gt;
                                          &lt;label&gt;
                                              &lt;input type="checkbox"/&gt;
                                              Remember me &lt;/label&gt;
                                      &lt;/div&gt;
                                      &lt;button type="submit" className="btn btn btn-primary"&gt;
                                          Log In
                                      &lt;/button&gt;
                                  &lt;/form&gt;
  
                              &lt;/div&gt;
  
                          &lt;/div&gt;&lt;/div&gt;
  
                  &lt;/Modal.Body&gt;
              &lt;/Modal&gt;
  
              &lt;div className="auto-container"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="column col-lg-6 col-md-12 col-sm-12"&gt;
                          &lt;div className="sec-title"&gt;
                              &lt;h2&gt;Choose from multi cuisines available&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div className="container" id="ContainerID"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-12  col-md-4 image-grid-item"&gt;
                          &lt;div id="img3"
                               className="entry-cover image-grid-cover has-image"&gt;
                              &lt;a href="#" className="image-grid-clickbox"&gt;&lt;/a&gt;
                              &lt;a href="#" className="cover-wrapper"&gt;Indian Food&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="col-12  col-md-4 image-grid-item"&gt;
                          &lt;div id="img2"
                               className="entry-cover image-grid-cover has-image"&gt;
                              &lt;a href="#" className="image-grid-clickbox"&gt;&lt;/a&gt;
                              &lt;a href="#" className="cover-wrapper"&gt;Indian Food&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="col-12 col-sm-6 col-md-4 image-grid-item"&gt;
                          &lt;div id="img1" className="entry-cover image-grid-cover has-image"&gt;
                              &lt;a href="#" className="image-grid-clickbox"&gt;&lt;/a&gt;
                              &lt;a href="#" className="cover-wrapper"&gt;Burgers &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="col-17  col-md-4 image-grid-item"&gt;
                          &lt;div id="img4" className="entry-cover image-grid has-image"&gt;
                              &lt;a href="#" className="image-grid-clickbox"&gt;&lt;/a&gt;
                              &lt;a href="#" className="cover-wrapper"&gt;Mexican Food&lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div className="col-12 col-sm-6 col-md-4 image-grid-item"&gt;
                          &lt;div id="img5" className="entry-cover imagegrid has-image"&gt;
                              &lt;a href="#" className="image-grid-clickbox"&gt;&lt;/a&gt;
                              &lt;a href="#" className="cover-wrapper"&gt;Chinese Food &lt;/a&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>export default App;</p>
  
  <p><a href="https://i.stack.imgur.com/LjQIm.jpg" rel="nofollow noreferrer">local webpage with modal appearing halfway off screen</a></p>