Search code examples
reactjshtmlcssreactstrapreact-modal

How can i set the content of reactstrap modal-header in center?

I'm using the reactstrap Modal,There is ModalHeader where I am showing my content.But I am facing the issue while i'm trying to put that content in center of header.

After doing inspect elements I found inside ModalHeader there is <h5> tag, inside this tag my contents are coming, I checked <h5> tag is not using the full width of Modal-Header.I think because of that its not coming in center. If someone know about reactstrap Modal please guide me how can I put my Modal-Header content in center.Thanks in Advance.

Here is my sample code.

<ModalHeader toggle={props.toggle} > 
<div className="d-flex justify-content-center mb-2">
 <img src={myImg} alt="img" className="imgSize" /> 
</div> 
<div className="d-flex justify-content-center"> 
<p>Hi <b>John -</b> here is my some text</p>
</div> 
</ModalHeader>
Solution

  • You can add className to h2 tag with cssModule props. Adding w-100 text-center solve the issue for me

    <ModalHeader toggle={props.toggle}  cssModule={{'modal-title': 'w-100 text-center'}}> 
<div className="d-flex justify-content-center mb-2">
 <img src={myImg} alt="img" className="imgSize" /> 
</div> 
<div className="d-flex justify-content-center"> 
<p>Hi <b>John -</b> here is my some text</p>
</div> 
</ModalHeader>