1

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>
Zaif Warm
  • 475
  • 3
  • 8

1 Answers1

6

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>
aseferov
  • 6,155
  • 3
  • 17
  • 24
  • Hi @aseferov thanks for reply,I applied this class now header content is coming to center but the closing modal icon is coming below header content. – Zaif Warm Feb 08 '19 at 19:30
  • Update my answer – aseferov Feb 08 '19 at 19:57
  • Its also working fine if i do like this in my css file. /* .modal-header h5{ width: 100%; text-align: center; } */ is it good practice if I do like this or do what you have answered? – Zaif Warm Feb 08 '19 at 20:04
  • Adding it to css file can make global affect for other modals. Also its not maintainable – aseferov Feb 08 '19 at 20:16