Responsive Address Form with React Bootstrap 5. Templates include basic examples, use of cards, use of photos & more.
Check out React Bootstrap Address Form Documentation for detailed instructions & even more examples.
importReactfrom'react';import{MDBBtn,MDBCard,MDBCardBody,MDBCardHeader,MDBCheckbox,MDBCol,MDBInput,MDBListGroup,MDBListGroupItem,MDBRow,MDBTextArea,MDBTypography}from'mdb-react-ui-kit';exportdefaultfunctionBasic(){return(<divclassName="mx-auto mt-5"style={{maxWidth: '900px'}}><MDBRow><MDBColmd="8"className="mb-4"><MDBCardclassName="mb-4"><MDBCardHeaderclassName="py-3"><MDBTypographytag="h5"className="mb-0">Biling details</MDBTypography></MDBCardHeader><MDBCardBody><form><MDBRowclassName="mb-4"><MDBCol><MDBInputlabel='First name'type='text'/></MDBCol><MDBCol><MDBInputlabel='Last name'type='text'/></MDBCol></MDBRow><MDBInputlabel='Company name'type='text'className="mb-4"/><MDBInputlabel='Address'type='text'className="mb-4"/><MDBInputlabel='Email'type='text'className="mb-4"/><MDBInputlabel='Phone'type='text'className="mb-4"/><MDBTextArealabel='Additional information'rows={4}className="mb-4"/><divclassName="d-flex justify-content-center"><MDBCheckboxname='flexCheck'value=''id='flexCheckChecked'label='Create an account?'defaultChecked/></div></form></MDBCardBody></MDBCard></MDBCol><MDBColmd="4"className="mb-4"><MDBCardclassName="mb-4"><MDBCardHeaderclassName="py-3"><MDBTypographytag="h5"className="mb-0">Summary</MDBTypography></MDBCardHeader><MDBCardBody><MDBListGroupflush><MDBListGroupItemclassName="d-flex justify-content-between align-items-center border-0 px-0 pb-0">
Products
<span>$53.98</span></MDBListGroupItem><MDBListGroupItemclassName="d-flex justify-content-between align-items-center px-0">
Shipping
<span>Gratis</span></MDBListGroupItem><MDBListGroupItemclassName="d-flex justify-content-between align-items-center border-0 px-0 mb-3"><div><strong>Total amount</strong><strong><pclassName="mb-0">(including VAT)</p></strong></div><span><strong>$53.98</strong></span></MDBListGroupItem></MDBListGroup><MDBBtnsize="lg"block>
Make purchase
</MDBBtn></MDBCardBody></MDBCard></MDBCol></MDBRow></div>);}Download MDB React - free UI KIT
Choose your favourite customized component and click on the image
Copy & paste the code into your MDB project
React Bootstrap Delivery address form card:
React Bootstrap Advanced address form:
React Bootstrap Address form with image:
