tripmedium better design, highligher class

FrontEnd/travel-and-work-app/src/Components/Home/Trip/IndexFilter.js

 import React from "react";
-import { Container, Card, Form, Row } from "react-bootstrap";
+import { Container, Card, Form, Row, Col } from "react-bootstrap";
 import TripSmall from "./TripSmall";
 import CardColumns from "react-bootstrap/CardColumns";
 import Spinner from "react-bootstrap/Spinner";
@@ -96,8 +96,8 @@ class IndexFilter extends React.Component {
             );
         } else {
             return (
-                <Container className="d-flex justify-content-center">
-                    <Row>
+                <Container className="d-flex mt-3">
+                    <Col>
                         <Card>
                             <Form>
                                 <Form.Group>
@@ -150,21 +150,23 @@ class IndexFilter extends React.Component {
                                 </Form.Group>
                             </Form>
                         </Card>
-                    </Row>
+                    </Col>
 
-                    <Row className="ml-3">
-                        <CardColumns className="d-flex flex-column">
-                            {this.state.trips.map((trip) => {
-                                return (
+                    <Col className="ml-3">
+                        {/*<CardColumns className="d-flex flex-column">*/}
+                        {this.state.trips.map((trip) => {
+                            return (
+                                <Row>
                                     <TripMedium
                                         key={trip.short_name}
                                         highlightWords={this.state.filter.words}
                                         trip={trip}
                                     />
-                                );
-                            })}
-                        </CardColumns>
-                    </Row>
+                                </Row>
+                            );
+                        })}
+                        {/*</CardColumns>*/}
+                    </Col>
 
                     {/*<CardColumns>
                         {this.state.trips.map((trip) => {

FrontEnd/travel-and-work-app/src/Components/Home/Trip/TripMedium.js

@@ -56,7 +56,7 @@ class TripMedium extends React.Component {
 
         return (
             <Link to={"/trips/" + this.props.trip.short_name}>
-                <Card>
+                <Card className="mb-3">
                     <Card.Body className="d-flex">
                         <div>
                             <div className="image-card">
@@ -71,12 +71,33 @@ class TripMedium extends React.Component {
                                             this.props.trip.possible_xp_reward
                                         } xp{" "}
                                     </span>
-                                    <h4 className="ml-3" id="trip-title">
-                                        {" "}
-                                        {this.props.trip.name}
-                                    </h4>
                                 </div>
                             </div>
+                        </div>
+                        <div>
+                            <h4 className="ml-3">
+                                <Highlighter
+                                    highlightClassName="textHighlight"
+                                    searchWords={
+                                        this.props.highlightWords
+                                            ? this.props.highlightWords
+                                            : []
+                                    }
+                                    autoEscape={true}
+                                    textToHighlight={this.props.trip.name}
+                                />
+                            </h4>
+
+                            <Highlighter
+                                highlightClassName="textHighlight"
+                                searchWords={
+                                    this.props.highlightWords
+                                        ? this.props.highlightWords
+                                        : []
+                                }
+                                autoEscape={true}
+                                textToHighlight={this.props.trip.description}
+                            />
                             <Row className="trip_sessions">
                                 <Col className="">
                                     <span className="dateIcon">
@@ -94,18 +115,6 @@ class TripMedium extends React.Component {
                                 </Col>
                             </Row>
                         </div>
-                        <div>
-                            <Highlighter
-                                highlightClassName="YourHighlightClass"
-                                searchWords={
-                                    this.props.highlightWords
-                                        ? this.props.highlightWords
-                                        : []
-                                }
-                                autoEscape={true}
-                                textToHighlight={this.props.trip.description}
-                            />
-                        </div>
                     </Card.Body>
                 </Card>
             </Link>