React with Bootstrap

[Speedwaymonia93]

Hi I want to achieve the following result in my React Component with Bootstrap:

but instead this is what I see (lines are for reference to know where the columns end:

Why the elements in columns are not entered even if I set it to be so and why when I hover over the text the icons move to the left? Do you happen to know how to fix it? Maybe I don’y know something important about Bootstrap in react.
Below, please find my component

import React from 'react';
import { Container, Row, Col} from 'react-bootstrap';
import { faAddressCard, faGraduationCap,faKeyboard, faGlobe, faTasks, faEnvelopeOpen} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import './Styles.css'

function Navigation()
{
    return(
		<Container fluid className="navigation_page">
				<h3 className="style_h3">Discover me!</h3>
				<Row>
				<Col className="d-flex justify-content-center test">
				<div><a href="#about" className="link_style"><FontAwesomeIcon icon={faAddressCard} className="icon_style"></FontAwesomeIcon><h4 className="style_h4">About me</h4></a></div>
				</Col>
				<Col className="d-flex justify-content-center test">
					<div><a href="#about" className="link_style"><FontAwesomeIcon icon={faGraduationCap} className="icon_style"></FontAwesomeIcon><h4 className="style_h4">Education</h4></a></div>
				</Col>
				<Col className="d-flex justify-content-center test">
					<div><a href="#about" className="link_style"><FontAwesomeIcon icon={faKeyboard} className="icon_style"></FontAwesomeIcon><h4 className="style_h4">Skills &amp; Technologies</h4></a></div>
				</Col>
			</Row>
			<Row>
				<Col className="d-flex justify-content-center test">
					<div><a href="#about" className="link_style"><FontAwesomeIcon icon={faGlobe} className="icon_style"></FontAwesomeIcon><h4 className="style_h4">Foreign languages</h4></a></div>
				</Col>
				<Col className="d-flex justify-content-center test">
					<div><a href="#about" className="link_style"><FontAwesomeIcon icon={faTasks} className="icon_style"></FontAwesomeIcon><h4 className="style_h4">Projects</h4></a></div>
				</Col>
				<Col className="d-flex justify-content-center test">
					<div><a href="#about" className="link_style"><FontAwesomeIcon icon={faEnvelopeOpen} className="icon_style"></FontAwesomeIcon><h4 className="style_h4">Contact</h4></a></div>
				</Col>
			</Row>
		</Container>
    )
}

export default Navigation

and CSS that I added:

/*NAVIGATION PAGE SET UP - NAVIGATION.JS */
.navigation_page{
	
	width: 100vw;
	text-align: center;
	justify-content: center;
}
.row_style{
	justify-content: center;
	display: flex;
	text-align: center;
	justify-content: center;
	
}
.test{
	border: 1px solid red;
	height: 200px;
}

.style_h3{
	font-size: 80px;
	text-transform: uppercase;
	letter-spacing: 7px;
	text-shadow: 4px 4px 4px #6666ff;
	color: #b3b3ff;
	text-align: center;
}

.style_h4{
	font-size: 35px;
	border-left: 5px solid #6699ff ;
	border-right: 5px solid #6699ff ;
	border-radius: 8px;
	padding:10px;
}
.icon_style{
	font-size: 100px;
	display: block;
	color:#e6e6e6;
	background: linear-gradient(to left, #9966ff, #9999ff, #6666ff, #9966ff);
	padding:15px;
	border-radius: 8px;
	width:380px;
	height:110px;
}
.link_style{
	text-decoration: none;
	color: #666666;
}
.link_style:hover{
	text-decoration: none;
	color: #666666;
}

.style_h4:hover
{
	background-color: #b3ccff;
	width: 320px;
	letter-spacing: 2px;
	text-decoration: none;
}

[marthak]

Hi [Speedwaymonia93]

flexbox properties apply to their direct children. The <Col> element is applying the flexbox styles to it’s direct child, which is the <div>, not the items inside of the <div>. So, you must remove that inner <div> for it to work, and I don’t think you even need the .justify-content-center class . Also, apply .w-100 class to the <a> and the <svg> so they span the full width of their container.

Example:

<Col>
   <a href="#about" className="link_style w-100">
    <FontAwesomeIcon icon={faAddressCard} className="icon_style w-100"></FontAwesomeIcon>
     <h4 className="style_h4">About me</h4>
  </a>
</Col>

and remove the width on .style_h4:hover to fix the hover issues.

Good luck!

[Speedwaymonia93]

Ok. Got it. It worked. And how to move the icons to the centre of each columns? Because now, after the changes that you suggested it looks like this:

[marthak]

apply bootstrap .w-100 class to the <svg> (the icon component)