How to add a piece of text after a div? ( React-js, Bootstrap)

Question

A very noob question. So I'm practicing making this website. How can I achieve this : I want to be able to write " To know more about us click here " under the get started button. I tried adding a simple tag after the buttons div to do so but that doesn't work. This is what I want it to finally look like: https://i.stack.imgur.com/TqAD9.png

if it helps this is the whole website hosted on netfy : https://pinnacletrial.netlify.app/

Here's the code : The current page is HOME.jsx and it calls a component Common.jsx COde of home.jsx: ---

import React from "react";
import web from "../src/images/myimage.svg";
import {NavLink} from "react-router-dom";
import Common from './Common';
import CarouselContainer from "./CarouselContainer";
import Aboutrefer from "./aboutrefer";



const Home =()  => {
    return (
         <>
         <CarouselContainer/>
        
         <Common name ='Learn with' imgsrc = {web} visit ='/service' btnname='Get started' />
        
       </>
         
         
        
         

     
    );
};

export default Home;

Code of Common.js ----

import React from "react";
import web from "../src/images/myimage.svg";
import {NavLink} from "react-router-dom";


const Common =(props)  => {
    return (
         <>

         
          <section id = "header" className = "d-flex align-items-between  ">
          <div className = "container-fluid">
            <div className = 'row'>
                <div className = "col-12" mx-auto>
               
                  <div className ="row">  
                  

                  
                  <div className = "col-md-6 pt-5 pt-lg-0 order-2 order-lg-1 d-flex justify-content-center flex-column">
                    <h1>{props.name} <strong className = "brand-name"> Pinnacle Tutorials</strong>
                    </h1>
                    <h2 className = "my-3">
                       We are a team of talented Teachers here for your ward
                     </h2>
                     <div ClassName = "mt-3">
                         <NavLink to={props.visit} className = "btn btn-success">Get Started {props.btname}</NavLink>
                     </div>

                  </div>
                  <div className = "col-lg-6   order-6 order-lg-5  header-img  d-flex justify-content-end">
                    <img src ={props.imgsrc} className = "img animated" alt = "home img "/>

                  </div>
                  
                    
                  </div>
                </div>
               </div>
              </div>  
          </section>
         </>

     
    );
};

export default Common;

Answer 1

You have div with class name "row". I would add the new div with the same class name "row" below it, because row in bootstrap means that blocks will stack on top of each other with occupying the full width of the container.

Common.js :

<div className="row">
    ....
    <h2 className = "my-3">
        We are a team of talented Teachers here for your ward
    </h2>
    ....
</div>
<div className="row">
     To know more about us click here
</div>

Answer 2

You can just write it down after the NavLink in Common.js like:

Example:

<h2 className = "my-3">
  We are a team of talented Teachers here for your ward
</h2>
<div ClassName = "mt-3">
  <NavLink to={props.visit} className = "btn btn-success">Get Started {props.btname</NavLink>
</div>

To know more about us, click here <NavLink to="/about">About</NavLink>

Complete code:

import React from "react";
import web from "../src/images/myimage.svg";
import {NavLink} from "react-router-dom";


const Common =(props)  => {
    return (
         <>

         
          <section id = "header" className = "d-flex align-items-between  ">
          <div className = "container-fluid">
            <div className = 'row'>
                <div className = "col-12" mx-auto>
               
                  <div className ="row">  
                  

                  
                  <div className = "col-md-6 pt-5 pt-lg-0 order-2 order-lg-1 d-flex justify-content-center flex-column">
                    <h1>{props.name} <strong className = "brand-name"> Pinnacle Tutorials</strong>
                    </h1>
                    <h2 className = "my-3">
                       We are a team of talented Teachers here for your ward
                     </h2>
                     <div ClassName = "mt-3">
                         <NavLink to={props.visit} className = "btn btn-success">Get Started {props.btname}</NavLink>
                     </div>

To know more about us, click here <NavLink to="/about">About</NavLink>

                  </div>
                  <div className = "col-lg-6   order-6 order-lg-5  header-img  d-flex justify-content-end">
                    <img src ={props.imgsrc} className = "img animated" alt = "home img "/>

                  </div>
                  
                    
                  </div>
                </div>
               </div>
              </div>  
          </section>
         </>

     
    );
};

export default Common;