From 2a302c361391200e32591080d497b2cb693748ee Mon Sep 17 00:00:00 2001
From: manisha <manisha_kanyal.scsebtech@galgotiasuniversity.edu.in>
Date: Jul 28 2021 07:12:10 +0000
Subject: remove mixture of reactstrap and bootstrap classes


---

diff --git a/src/landingpage/Events.js b/src/landingpage/Events.js
index 0c5d3c1..4b3f87e 100644
--- a/src/landingpage/Events.js
+++ b/src/landingpage/Events.js
@@ -31,7 +31,9 @@ const Events = (props) => {
           Meetings and testdays in the next 7 days{" "}
           <SourceLink href="https://apps.fedoraproject.org/calendar/QA/" />
         </h1>
-        <div className="col-md-12 padded">{meetings}</div>
+        <Col md={12} className="padded">
+          {meetings}
+        </Col>
       </CardBody>
     </Card>
   )
diff --git a/src/landingpage/LandingPage.js b/src/landingpage/LandingPage.js
index f95ebed..403196d 100644
--- a/src/landingpage/LandingPage.js
+++ b/src/landingpage/LandingPage.js
@@ -87,9 +87,9 @@ const LandingPage = () => {
   components = components.map((row) => (
     <React.Fragment key={row}>
       {row.map((item) => (
-        <div className="padded col-md-6" key={item}>
+        <Col md={6} className="padded" key={item}>
           {available_components_mapper[item]}
-        </div>
+        </Col>
       ))}
     </React.Fragment>
   ))
@@ -101,16 +101,16 @@ const LandingPage = () => {
           <div className="bluebox">
             <Container>
               <Row>
-                <div className="col-md-12">
+                <Col md={12}>
                   <Timeline data={landingPageData.schedule} />
-                </div>
+                </Col>
               </Row>
             </Container>
           </div>
           <Container>
             <Row>
               {components}
-              <div className="padded col-md-12 text-right col-md-offset-2">
+              <Col md={{ size: 12, offset: 2 }} className="padded text-right">
                 <Button className="mt" color="primary" onClick={toggleModal}>
                   <i className="fas fa-cog"></i>
                 </Button>
@@ -146,22 +146,22 @@ const LandingPage = () => {
                     </Button>
                   </ModalFooter>
                 </Modal>
-              </div>
+              </Col>
             </Row>
             <Row className="d-flex justify-content-center padded">
-              <div className="col-md-12">
+              <Col md={12}>
                 <h1 className="text-center">
                   Have some spare time? Click on below button to contibute
                 </h1>
-              </div>
-              <div className="col-md-2 padded">
+              </Col>
+              <Col md={2} className="padded">
                 <Link
                   className="btn btn-primary btn-block btn-wrap-text btn-lg active"
                   to="/wizard"
                   role="button">
                   Explore <i className="fas fa-search"></i>
                 </Link>
-              </div>
+              </Col>
             </Row>
           </Container>
         </div>
diff --git a/src/landingpage/common/BugStats.js b/src/landingpage/common/BugStats.js
index 015de59..e50db60 100644
--- a/src/landingpage/common/BugStats.js
+++ b/src/landingpage/common/BugStats.js
@@ -1,11 +1,11 @@
 import React from "react"
-import { Table } from "reactstrap"
+import { Table, Col } from "reactstrap"
 
 const BugStats = (props) => {
   const { milestone, stats } = props
 
   return (
-    <div className="col-md-6">
+    <Col md={6}>
       <Table className="events" striped bordered>
         <thead>
           <tr>
@@ -37,7 +37,7 @@ const BugStats = (props) => {
           )}
         </tbody>
       </Table>
-    </div>
+    </Col>
   )
 }
 
diff --git a/src/wizard/components.js b/src/wizard/components.js
index 7e91f72..796886c 100644
--- a/src/wizard/components.js
+++ b/src/wizard/components.js
@@ -9,6 +9,7 @@ import {
   ModalBody,
   ModalFooter,
   Button,
+  Col,
 } from "reactstrap"
 import uniqueID from "../helpers/uniqueID"
 
@@ -19,10 +20,10 @@ const CollapsableCard = (props) => {
     <Card>
       <CardHeader>
         <Row>
-          <div className="col-sm-10">{title}</div>
-          <div className="col-sm-2">
+          <Col sm={10}>{title}</Col>
+          <Col sm={2}>
             <Toggler id={id} color={expand_class} text={expand_text} />
-          </div>
+          </Col>
         </Row>
       </CardHeader>
       <UncontrolledCollapse toggler={"#" + id}>