Unwanted horizontal scrollbar in Next.js

Question

I have got a unwanted scrollbar in my next.js project in a page. I could not figure out what's the problem. I'm not using any css files but only react-bootsrapt components. Here is my code:

import { Spinner, Col, Container, Row, Figure } from "react-bootstrap";
import ContinueAsGuest from "../components/mainMenuPage/ContinueAsGuest";
import LastDate from "../components/mainMenuPage/LastDate";
import MainPageForm from "../components/mainMenuPage/MainPageForm";
import { useSelector } from "react-redux";

const HomePage = () => {
  const isLoading = useSelector((state) => state.loading.isLoading);
 
  return (
    <div>
      <Row>
        <Container className="d-flex align-items-center justify-content-center mt-5">
          <Row>
            <Col className="pt-5">
              <Row>
                <Figure>
                  <Figure.Image
                    width={300}
                    src="https://upload.wikimedia.org/wikipedia/tr/e/ee/Bilkent%C3%9Cniversitesi-logo.png"
                  ></Figure.Image>
                </Figure>
              </Row>
              <Row>
                <LastDate></LastDate>
              </Row>
            </Col>
            <Col className="ps-5 ">
              <Row>
                <h1 className="text-primary">Welcome To Erasmus Page</h1>
              </Row>
              <Row className="mt-3">
                <MainPageForm></MainPageForm>
              </Row>
              <Row className="mt-3">
                <ContinueAsGuest></ContinueAsGuest>
              </Row>
            </Col>
          </Row>
        </Container>
      </Row>
      <Row className="d-flex align-items-center justify-content-center mt-5">
        {isLoading && (
          <Spinner
            animation="border"
            variant="primary"
            className="m-5"
            style={{
              width: 200,
              height: 200,
            }}
          />
        )}
      </Row>
    </div>
  );
};

export default HomePage;

enter image description here

I was trying to use grid system from react-bootstrap but the result is an unwanted horizontal scrollbar

Answer 1

The react-bootstrap layout generally has Row wrapped in a Container.

As an attempt to fix the horizontal scroll bar, perhaps try change the output wrapper from <div> to <Container>, or <Container fluid>, for example:

<Container>
  <Row>
    <Container className="d-flex align-items-center justify-content-center mt-5">
      <Row>
        <Col className="pt-5">
          <Row>
            <Figure>
              <Figure.Image
                width={300}
                src="https://upload.wikimedia.org/wikipedia/tr/e/ee/Bilkent%C3%9Cniversitesi-logo.png"
              ></Figure.Image>
            </Figure>
          </Row>
          <Row>
            <LastDate></LastDate>
          </Row>
        </Col>
        <Col className="ps-5 ">
          <Row>
            <h1 className="text-primary">Welcome To Erasmus Page</h1>
          </Row>
          <Row className="mt-3">
            <MainPageForm></MainPageForm>
          </Row>
          <Row className="mt-3">
            <ContinueAsGuest></ContinueAsGuest>
          </Row>
        </Col>
      </Row>
    </Container>
  </Row>
  <Row className="d-flex align-items-center justify-content-center mt-5">
    {isLoading && (
      <Spinner
        animation="border"
        variant="primary"
        className="m-5"
        style={{
          width: 200,
          height: 200,
        }}
      />
    )}
  </Row>
</Container>