0

need two div at center vertically and horizontally too, button and heading at center, like this, enter image description here

my tried code is here,

        <div style={{height:'100px', backgroundColor:'grey'}}>
            <div className="d-flex justify-content-md-center align-items-center h-100">
                <div >
                    <h1 style={{color:'#EEEEEE'}}>INNOVATE WITH </h1>
                </div>

            </div>
            <div className="" style={{float:'right'}}>
                <Button style={{width:'200px'}} className='float-right'>Get Started</Button>
            </div>
        </div>

which is showing like this, enter image description here

when i try to do this,

        <div style={{height:'100px', backgroundColor:'grey'}}>
            <div className="d-flex justify-content-md-center align-items-center h-100">
                <div >
                    <h1 style={{color:'#EEEEEE'}}>INNOVATE WITH</h1>
                </div>
                <div className="" style={{float:'right'}}>
                    <Button style={{width:'200px'}} className='float-right'>Get Started</Button>
                </div>
            </div>

        </div>

it will be enter image description here

Ashish Kamble
  • 2,555
  • 3
  • 21
  • 29

1 Answers1

0

Instead of justify-content-md-center use justify-content-between

and for h1 use text-center and w-100 bootstrap classes to align it center.

<h1 className="text-center w-100" style={{color:'#EEEEEE'}}>INNOVATE WITH</h1>
Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37