Recently, I integrated a bootstrap login page component into my react project. However, I encountered an issue where every time the login button is clicked, it expands all the way down without any apparent reason. The code snippet below shows the component obtained from the official bootstrap website:
import React from 'react';
import {
MDBContainer,
MDBInput,
MDBCheckbox,
MDBBtn,
MDBIcon
}
from 'mdb-react-ui-kit';
function App() {
return (
<MDBContainer className="p-3 my-5 d-flex flex-column w-50">
<MDBInput wrapperClass='mb-4' label='Email address' id='form1' type='email'/>
<MDBInput wrapperClass='mb-4' label='Password' id='form2' type='password'/>
<div className="d-flex justify-content-between mx-3 mb-4">
<MDBCheckbox name='flexCheck' value='' id='flexCheckDefault' label='Remember me' />
<a href="!#">Forgot password?</a>
</div>
<MDBBtn className="mb-4">Sign in</MDBBtn>
<div className="text-center">
<p>Not a member? <a href="#!">Register</a></p>
<p>or sign up with:</p>
<div className='d-flex justify-content-between mx-auto' style={{width: '40%'}}>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='facebook-f' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='twitter' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='google' size="sm"/>
</MDBBtn>
<MDBBtn tag='a' color='none' className='m-1' style={{ color: '#1266f1' }}>
<MDBIcon fab icon='github' size="sm"/>
</MDBBtn>
</div>
</div>
</MDBContainer>
);
}
export default App;
I have thoroughly examined the code to identify the source of the stretching behavior upon clicking the button, but unfortunately, I could not pinpoint the exact cause. Any insights or assistance on this matter would be greatly appreciated.