I've been exploring different solutions to vertically center my rows within the container. Adding d-flex and align-items-center did work for centering them vertically but caused the rows to appear side by side. I'm curious if there's an alternative method for achieving vertical centering or if there's a clever workaround that can be applied.
import React from "react";
function Projects() {
return (
<div className="home">
<div className="container central align-items-center">
<div className="row justify-content-center my-auto">
<div className="col-3">
<img
src="/assets/motherboard.jpg"
className="img-fluid"
alt="Green motherboard"
/>
</div>
<div class="col-5">
<h1 class="font-weight-light">Home</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and
</p>
</div>
</div>
<div className="row justify-content-center my-auto">
<div className="col-3">
<img
src="/assets/motherboard.jpg"
className="img-fluid"
alt="Green motherboard"
/>
</div>
<div className="col-5">
<h1 className="font-weight-light">Home</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and
</p>
</div>
</div>
<div className="row justify-content-center">
<div className="col-3">
<img
src="/assets/motherboard.jpg"
className="img-fluid"
alt="Green motherboard"
/>
</div>
<div className="col-5">
<h1 className="font-weight-light">Home</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and
</p>
</div>
</div>
</div>
</div>
);
}
export default Projects;
The css I'm using is here:
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');
@import url('https://fonts.googleapis.com/css?family=Assistant&display=swap');
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
.central {
height: 87.5vh;
}
h1 {
font-family: 'Assistant', Arial, serif;
font-size: xxx-large;
}
.home {
background-image: url("../public/assets/computer.jpg");
background-size: cover;
}
JSFiddle: https://jsfiddle.net/mqud7134/