styling layout for a react app using react-bootstrap

I am working on my frontend UI. I am using react-bootstrap 0.33.1 which supportsbootstrap v3.3.x.

This is how my UI looks like right now.

But, this is not something that I am expecting. I want to achieve something like this.

this is my jsx file:

import React from "react";import { Grid, Row, Col, FormControl, Button, Image } from "react-bootstrap";import "bootstrap/dist/css/bootstrap.min.css";import "./ListComponent.css";function ListComponent() {  return (<div><Grid><Row className="list-header"><Col md={4}><FormControl type="text" placeholder="Enter name to search" /></Col></Row><br /><Grid className="list-table"><Row className="item-row" style={{backgroundColor:'black', color:'white'}}><Col sm={6} md={3}>              Name</Col><Col sm={6} md={3}>              Address</Col><Col sm={6} md={3}>              Rating</Col><Col sm={6} md={3}>              Picture</Col><Col sm={6} md={3}>              Action</Col></Row><Row className="item-row"><Col sm={6} md={3}>              Cox's Bazar</Col><Col sm={6} md={3}>              Cox's Bazar</Col><Col sm={6} md={3}>              5</Col><Col sm={6} md={3}><Image                src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Cox%27s_Bazar_Sunset.JPG/186px-Cox%27s_Bazar_Sunset.JPG"                rounded                responsive              /></Col><Col sm={6} md={3}><div className="action"><Button bsStyle="primary">Update</Button><Button bsStyle="danger">Delete</Button></div></Col></Row><Row className="item-row"><Col sm={6} md={3}>              Bandarban</Col><Col sm={6} md={3}>              Bandarban</Col><Col sm={6} md={3}>              5</Col><Col sm={6} md={3}><Image                src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Cox%27s_Bazar_Sunset.JPG/186px-Cox%27s_Bazar_Sunset.JPG"                rounded                responsive              /></Col><Col sm={6} md={3}><div className="action"><Button bsStyle="primary">Update</Button><Button bsStyle="danger">Delete</Button></div></Col></Row><Row className="item-row"><Col sm={6} md={3}>              Sundarban</Col><Col sm={6} md={3}>              Sundarban</Col><Col sm={6} md={3}>              5</Col><Col sm={6} md={3}><Image                src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Cox%27s_Bazar_Sunset.JPG/186px-Cox%27s_Bazar_Sunset.JPG"                rounded                responsive              /></Col><Col sm={6} md={3}><div className="action"><Button bsStyle="primary">Update</Button><Button bsStyle="danger">Delete</Button></div></Col></Row></Grid><br /><Button bsStyle="primary">Create New Tourist Place</Button></Grid></div>  );}export default ListComponent;

And here is my css file:

.list-header input {  flex: 2;  border-top: 1px solid black;  border-right: 0px;  border-left: 1px solid black;  border-bottom: 0px;  border-radius: 15px;  padding: 0.5rem;  background-color: #efefef;}.list-table {  display: flex;  flex-direction: column;  /* align-items:center; */  justify-content: center;  flex-wrap: wrap;  border: 1px solid black;}.action {  display: flex;  gap: 1rem;}.item-row {  /* padding: 1%; */  display: flex;  /* flex-wrap: wrap; */  justify-content: center;  border: 1px solid black;  text-align: center;  border-bottom: 1px solid white;}

What should I change in order to achieve the desired design? I tried different ways but this is the best I can get to.