how to Insert multiple Image into react-boostrap modal?

user_15529116 0
Viewed 298

I'm trying to create my website application using react-bootstrap and on one of my pages I need to show some modal that have 6 picture and when the user click on one of the picture it will redirect them to another link. I manage to create the modal but the position was weird for each picture. How can I resolve this problem ? Can someone help me provide with some link Design shown below

Modal should look like this

Here's my code:

            <Modal show={show} onHide={handleClose} animation={false}>
                <Row>
                    <Col lg={3}>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>

                    <Col lg={3}>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>

                    <Col lg={3}>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>
                </Row>


                <Row>
                    <Col>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>

                    <Col>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>
                   
                    <Col>
                        <a href="https://www.instagram.com/diamondhotelsamarinda/"><img src="/Images/logoig.png" alt="Instagram"/></a>
                    </Col>
                </Row>
            </Modal>
react-bootstrap reactjs css html
1 Answers

You can take a look at this sandbox for live working example. Specifically, you should set xs={4} instead of lg={3} for each K. Also, you should set margin for each row and width property for each image. You can use this code.

import Modal from "react-bootstrap/Modal";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.min.css";
import { useState } from "react";

export default function App() {
  const [show, setShow] = useState(true);

  const handleClose = () => {
    setShow(false);
  };

  return (
    <div>
      <button onClick={() => setShow(true)}>show modal</button>
      <Modal
        contentClassName="transparentBgClass"
        show={show}
        onHide={handleClose}
        animation={false}
      >
        <Row style={{ marginTop: 20, marginLeft: 20, marginRight: 20 }}>
          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>

          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>
          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>
        </Row>

        <Row
          style={{
            marginTop: 20,
            marginBottom: 20,
            marginLeft: 20,
            marginRight: 20
          }}
        >
          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>

          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>

          <Col xs={4}>
            <a
              href="https://www.instagram.com/diamondhotelsamarinda/"
              target="_blank"
              rel="noreferrer"
            >
              <img
                src="/Images/logoig.png"
                alt="Instagram"
                style={{ width: "100%" }}
              />
            </a>
          </Col>
        </Row>
      </Modal>
    </div>
  );
}
user_73994780
Related